I have a react-big-calendar, I want to fetch the events of this week from the backend and the other weeks from the local storage.
My code is :
componentDidMount() {
fetch("url")
.then(Response => Response.json())
.then(data => {
let evts = data;
for (let i = 0; i < evts.length; i++) {
evts[i].start = moment(evts[i].start).toDate();
evts[i].end = moment(evts[i].end).toDate();
this.state.evt1.push(evts[i])
}
this.setState({
evt1: evts,
prevEvents : evts
})
})
console.log(this.state.evt1)
const cachedHits = JSON.parse(localStorage.getItem('Evènements'))
console.log(cachedHits)
for (let j = 0; j <cachedHits.length; j++) {
cachedHits[j].start = moment(cachedHits[j].start).toDate();
cachedHits[j].end = moment(cachedHits[j].end).toDate();
this.state.evt2.push(cachedHits[j])
}
this.setState( {
evt2: this.state.evt2
})
this.setState({
events: [...this.state.evt1, ...this.state.evt2]
})
console.log(this.state.events)
}
the events
is the merged array of evt1
(events from the backend) and evt2
(events from the localstorage), when I run it, I get on my console :
The evt1 are :
The evt2 are :
But, on my calendar, just the evt2 are displayed and not all the events (evt1 and evt2).
How can display all the events on my calendar ?
You can use spread operator to merge two array.
var a = [{fname : 'foo'}]
var b = [{lname : 'bar'}]
var c = [...a, ...b] // output is [{fname : 'foo'},{lname : 'bar'}]