React сравнить или сопоставить дату с данными restapi

Question

У меня проблема в React JS. Как мне сравнить или сопоставить дату header с rest api start_date. Он отображается при рендеринге на странице компонентов.

Rest API

[
{
"id": "1",
"staff_name": "Jill",
"custom_service_name": "Jone",
"start_date": "2020-05-06 11:30:00",
"end_date": "2020-05-06 11:45:00",
},
{
"id": "2",
"staff_name": "james",
"custom_service_name": "smith",
"start_date": "2020-05-06 11:00:00",
"end_date": "2020-05-06 11:15:00",
}
]

Страница компонентов:

var headerdate = ['11:00 AM', '11:30 AM', '12:00 AM'];


  this.state = {
      appointmentdata:[],      
    }
  } 

componentDidMount() {
    axios.get(`http://localhost/route/v1/appointment`)
      .then(res => {
        const appointmentdata = res.data;
        console.log(appointmentdata);
        this.setState({ appointmentdata });
      })
  }


render() {  
  return (
    <div>
         // write your compare or match dates code here 
      {this.state.appointmentdata.map(data => <p>{data.start_date}</p>) }
   </div>
  )
}

Я пытаюсь, но не могу сделать logi c

if (data.start_date === this.state.headerdate ....

Ожидаемый результат

просто сопоставьте или сравните start_date с header датой

Что мне делать? Кто-нибудь может мне помочь?

Answer 1

Вы можете использовать Moment js ( Moment Js)

сначала установить npm install moment --save

импортировать import moment from "moment"; в свой компонент

const dateTime = moment(data.start_date.toString());
if(dateTime.format('h:mm A')===this.state.headerdate){
// your code goes here
}