How to get the name of the day from a date in React JS?

You can get the name of the day (e.g., “Monday”, “Tuesday”, etc.) from a given date in React using the Date object along with an array of day names. Here’s how you can do it:

import React from 'react';

function DayNameFromDate({ date }) {
  const getDayName = (inputDate) => {
    const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const dayIndex = inputDate.getDay();
    return dayNames[dayIndex];
  };

  const dayName = getDayName(new Date(date));

  return (
    <div>
      <p>Day of the week: {dayName}</p>
    </div>
  );
}

export default DayNameFromDate;

In this example, the getDayName function calculates the day name based on the provided input date. It uses an array dayNames to store the names of the days of the week, and then retrieves the day index using getDay() method of the Date object.

The day name is fetched from the dayNames array using the retrieved index. This gives you the name of the day corresponding to the input date.

You can use this component by passing a date as a prop:

<DayNameFromDate date="2023-08-15" />

Replace "2023-08-15" with your desired input date in the format “YYYY-MM-DD”. Remember that JavaScript’s Date object works in the local time zone of the user’s device. If you need to handle time zones or more complex date-related functionality, consider using a library like date-fns or moment.js.