I am doing a project using react-big-calendar and I have data from MySQL and fetched it already. I wanted to pass values from it to a newEvent variable which is a blank object initialized using useState then I used useEffect and .map() to loop. Lastly, before looping, it would push or put the object with new values to an allEvents variable that would be used by the calendar.
My problem is that it would give no values when the page is accessed.
Here's my code:
const events = []
function MyFunction(){
const dataInfo = ([someData]) //an array of objects fetched from MySQL
const [allEvents, setallEvents] = useState(events) //the variable to be passed to react-big-calendar to show events
const [newEvent, setnewEvent] = useState({id: "", start: "", end: ""}) //where the values are fetched from dataInfo then pass it to allEvents
useEffect(() =>{
dataInfo.map((val)=>{
const datef = new Date(val.date_from)
const datet = new Date(val.date_to)
setnewEvent({...newEvent, id: val.activities_id})
setnewEvent({...newEvent, start: datef})
setnewEvent({...newEvent, end: datet})
setallEvents([...allEvents, newEvent])
console.log("event: ", newEvent) //only shows {id: '', start: '', end: ''}
})
}, [dataInfo])
console.log(allEvents) //only shows 0: {id: '', start: '', end: ''}
}
If I removed the useEffect and just place the mapping under the function, it would show an array on console with 25 arrays with incrementing sizes and its elements are only consisting an object with a value only on the end key that has a repeated value taken from the very last row of the dataInfo variable, which is the data from MySQL, then it would give me the message: Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. The code is this:
dataInfo.map((val)=>{
const datef = new Date(val.date_from)
const datet = new Date(val.date_to)
setnewEvent({...newEvent, id: val.activities_id})
setnewEvent({...newEvent, start: datef})
setnewEvent({...newEvent, end: datet})
setallEvents([...allEvents, newEvent])
console.log("event: ", newEvent)
})
console.log(allEvents) //shows the 25 arrays with incrementing sizes and the only the end key of every object has data from the last row of data from MySQL. The id and start key are blanks
And also, if it still in useEffect and I pass the dataInfo along with newEvent and/or allEvents or just allEvents (except when I pass newEvent only or along with allEvents, it would give me blank data), the console will show infinite amount of arrays incrementing its size and the data of its objects and only the end key has value. The code is this:
useEffect(() =>{
datainfo.map((val)=>{
const datef = new Date(val.date_from)
const datet = new Date(val.date_to)
setnewEvent({...newEvent, id: val.activities_id})
setnewEvent({...newEvent, start: datef})
setnewEvent({...newEvent, end: datet})
setallEvents([...allEvents, newEvent])
console.log("event: ", newEvent)
})
}, [datainfo, newEvent, allEvents]) // I tried [datainfo, allEvents] or [datainfo, newEvent] or [allEvents] but it gives the infinite arrays except [newEvent] and [newEvent, all Events] since these two show blank data
console.log(allEvents)
TLDR: I can get data from MySQL but useEffect and .map() can't let me assign those data to an object called newEvent that I need to pass to allEvents for my react-big-calendar.
Thank you in advance for the help!