Creating a react function for a newbie-CodePudding

I have a project where I'm suppose to get ta name of the day as a header in a react program. For ex "Hello Monday!" The error I'm getting is that toDayString is not a function. And as a total newbie trying to learn on a very basic level I don't really get how to make a function out of it? Hoping this is a rather simple problem for some of you that might can help a lost soul? This is the code I got so far in HelloDay.js witch is imported to App.js in <HelloDay/>

import React from 'react';


var HelloDay = () => {
  var showdate = new Date();
  var displaytodaysday =
    showdate.getDay();
  var dt = showdate.toDayString();

  return (
    <div>
      <top>
      <h1>
         "Hello"
        {displaytodaysday} 
        
        </h1>
      </top>
    </div>
  );
};
export default HelloDay;

CodePudding user response：

You can use new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(yourDate)

It's described in here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

So in your case I will do something like this:

const HelloDay = () => {
  const nameOfCurrentDay = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(new Date());
  return (
    <div>
      <top>
        <h1>
         Hello {nameOfCurrentDay} 
        </h1>
      </top>
    </div>
  );
};

export default HelloDay;

CodePudding user response：

Try using this

const dt = showdate.toLocaleString("default", { weekday: "long" });

Working example here: https://codesandbox.io/s/lucid-brook-1he8o?file=/src/App.js:162-229

CodePudding user response：

There's no standard way to get the day name from a date. There are libraries out there that you can use, but if the usecase is limited to showing the current day, I think it is doable without a library.

I would recommend creating a separate function to get day name given the date., somethink like :

const getDayFromDate = (date) => {
  const finalDate = date || new Date();
  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  return days[finalDate.getDay()];
 // or use date object to return the day
 // return date.toLocaleString('default', {weekday: 'long'});
}

const  HelloDay = () => {
var showdate = new Date();
var displaytodaysday = getDayFromDate(showdate);

return (
  <div>
    <top>
     <h1>
      "Hello"
      {displaytodaysday} 
    
     </h1>
    </top>
   </div>
  );
};
export default HelloDay;

This is a very crude way to go about it, but I hope you get the idea.

CodePudding user response：

The answer using the Intl API provides a nice input, but I wanted to provide you insights on how to do this with the good old JavaScript Date API.

The key point to keep in mind is that your call to getDay() returns the day index of the week, not the day as a string. So you'll need to use it against the collection of days as string. Also, the index 0 day count starts at Sunday:

var HelloDay = () => {
  var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  
  var displaytodaysday = days[new Date().getDay()];

  return (
    <div>
      <top>
      <h1>
        Hello {displaytodaysday} 
        </h1>
      </top>
    </div>
  );
};

Alternatively you can use toLocaleString with a format option as follows:

var HelloDay = () => {
  var displaytodaysday = new Date().toLocaleString("en-US", { weekday: "long" });

  return (
    <div>
      <top>
      <h1>
        Hello {displaytodaysday} 
        </h1>
      </top>
    </div>
  );
};