Solution

To compare two dates in React, you can use the JavaScript Date object with the getTime() method, and use the comparison operator to compare dates.

Snippet

In this snippet, we will create two date object with getTime() method, use comparison operator, and print the which date is earlier and letter.

const date1 = new Date('2022-12-15');
const date2 = new Date('2022-12-16');

if (date1.getTime() < date2.getTime()) {
  console.log("date1 is earlier than date2");
} else if (date1.getTime() > date2.getTime()) {
  console.log("date1 is later than date2");
} else {
  console.log("date1 equal to date2");
}

Example

In this example, we will compare two date object, store which date earlier than date, and show in the UI.

Let’s start coding…

import React, { useEffect, useState } from "react";
export default function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    const date1 = new Date('2022-12-15');
    const date2 = new Date('2022-12-16');

    if (date1.getTime() < date2.getTime()) {
      // date1 is earlier than date2
      setMessage("date1 is earlier than date2");
    } else if (date1.getTime() > date2.getTime()) {
      // date1 is later than date2
      setMessage("date1 is later than date2");
    } else {
      // date1 equal to date2
      setMessage("date1 equal to date2");
    }
  }, []);

  return (
    <div className="App">
      <h1>{`Date Comparison`}</h1>
      <p>{message}</p>
    </div>
  );
}

Output

Date, Comparison

codesandbox