I'm using react-day-picker and I try to disable an array of dates from an axios function like this :
this.state = {
dateDisabled: [],
}
componentDidMount() {
axios.get(URL_GET_DATE)
.then(response => {
const date = response.data;
this.setState({
dateDisabled: date
})
})
}
Also my state dateDisabled become like this when I console.log:
(2) [{…}, {…}]
`0: date_arrivee: "2020-04-07T21:00:00.000Z" date_depart: "2020-04-10T21:00:00.000Z"
`1: date_arrivee: "2020-03-24T22:00:00.000Z"date_depart: "2020-03-30T21:00:00.000Z"
I would like to have the same result as here ->
disabledDays={[
{
after: new Date(2017, 3, 20),
before: new Date(2017, 3, 25),
},
]}
/>
How my dates could become before and after props ? Thank you and sorry for my bad english
You can simply map over the array to achieve this result:
const dates = [{
date_arrivee: "2020-04-07T21:00:00.000Z",
date_depart: "2020-04-10T21:00:00.000Z"
}, {
date_arrivee: "2020-03-24T22:00:00.000Z",
date_depart: "2020-03-30T21:00:00.000Z",
}];
const transformedDates = dates.map((date)=>{
return {
before: new Date(date.date_arrivee),
after: new Date(date.date_depart),
}
});
console.log(transformedDates);
You can set the transformedDates
to state and then feed this to React Day Picker.