How can I use date type using map function in React?

Question

I've just started studying React.

I'm using map function to use data.

Here's my code.

{dailynoteList.map((val) => {
      return (
        <div key={val.index} className="dailybox">


          //<div className="valSubject"> 
            //<div className="subjectText">{val.subject}</div>  
          //</div>

          <div className="contentDate">
            <div className="valDate">{val.date}</div>
          </div>
        </div> 
      )
    })} 

And the result of "{val.date}" is like this.

I want to use only month and date like "8/8" or "August 8".

How can I use {val.date}?

Answer 1

Just utilize the Date constructor and the method toDateString to format it.

<div className="valDate">{new Date(val.date).toDateString()}</div>

You may also use package moment for this and it provides more formatting, but the library is quite heavy.

Answer 2

You can using dayjs to format day.

{dayjs(val.date).format("M/D")} // return 8/8

{dayjs(val.date).format("MM/DD")} // return 08/08

{dayjs(val.date).format("MMMM D")} // return August 8

Answer 3

install

npm install moment --save

import to your component

import moment from 'moment'

change

<div className="valDate">{new Date(val.date).toDateString()}</div>

to

<div className="valDate">{moment(val.date).format('LL')}</div>

Answer 4

This is not the right question, it should be How to get year/month/day from a date object?

anyway JS only you can

 new Date(val.date).toLocaleDateString() // thats will return "8/8/2021" // or you can new Date(val.date).toLocaleDateString().slice(0,3) // thats will return 8/8

Im suggestion that you play a bit with Date constructor, and read about it JavaScript Date objects