Having a nightmare trying to compare whether two dates match in a React App

user_14731526 0
Viewed 56

As the title says I am struggling to get this thing to work. I have looked at the similar posts on here and many reference MomentJS, which on their own site they advise against using it now.

 const today = new Date().toLocaleDateString('en-gb')

 return loading ? <Spinner /> : 
 <Fragment>
    <div className="calendar_events">
      <p className="ce_title">Upcoming Events</p>
        {
          appointments.map(appointment => {
            let date = new Date(appointment.date).toLocaleDateString('en-gb')
            {console.log('date', typeof date)}
            {console.log('today', typeof today)}
            if(today == date) {
              <Appointment key={appointment._id} appointment={appointment} date={date}/>
            }        
          })
        }
    </div>
  </div>
</Fragment>

I have tried with moment but no success. I am now trying vanilla JS, when I console.log each date, today and an appointment date, they're the same. when I console.log the typeof these, they're both strings, but my if statement never runs.

I only want to call the component for appointments that match todays date or any other given date on the calendar.

i realise I am recreating the wheel here, but this is more about learning and taking my mind off things than the actual end result.

I would be happy for any guidance as to what on Earth I am missing.

Console output for typeof

date string Calendar.js:39
today string Calendar.js:40

Console output for each variable

date 29/11/20 Calendar.js:39
today 29/11/20 Calendar.js:40 *2 as there are two demo appointments on this date.

I have also tried the == and === operators but nada.

Please send help, my sanity is lost.

Edit

I managed to get it working, I think with the help of @Uzair Ashraf.

It even appears to work more succinctly with the following code

{
          appointments.map(appointment => {
            let date = new Date(appointment.date).toLocaleDateString('en-gb')
            if(today === date) {
              return <Appointment key={appointment._id} appointment={appointment} />
            }
           })
        }
date javascript
1 Answers

You are missing a return statement. Although if you don't have a fallback it will create an array with React elements and undefined.

I would recommend filtering through the array and then mapping

Edit: Also you seem to have an extra closing div tag. You also don't need the fragment

Edit2: You can split a date like this:

let date =  "2020-11-29T00:00:00.000Z"
date = date.split('T')[0]

 const today = new Date().toLocaleDateString('en-gb')

 return loading ? <Spinner /> : 
    <div className="calendar_events">
      <p className="ce_title">Upcoming Events</p>
        {
          appointments
           .filter(appointment => new Date(appointment.date).toLocaleDateString('en-gb') === today)
           .map(appointment => {
              return <Appointment key={appointment._id} appointment={appointment} date={new Date(appointment.date).toLocaleDateString('en-gb')}/>
            }        
          })
        }
  </div>
user_19646360
Related