I'm struggling to modify a JSON like object with the setState property (from a useState hook). I would like to add items to labels and data arrays, at the same time.
const dataInit = {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 2, 30, 49,80],
}]
};
Here is the initialization of my useState hook with a try that doesn't work:
const [graphData, setGraphData] = useState(dataInit)
setGraphData(prevState => ({
...prevState,
labels: prevState.labels.concat(["hey"]),
datasets: prevState.datasets[0].data.concat([3])
})
)
Thanks for helping
Always return a new object to the nested props that are objects, while setting the state. What concat does is append new value to the existing object. Try something like:
const [graphData, setGraphData] = useState(dataInit)
setGraphData(prevState =>
{
let _datasets = [...prevState.datasets];
_datasets[0].data = [..._datasets[0].data, ...data];
return {
...prevState,
labels: [...prevState.labels, "hey"], //new array returns with previous and new value
datasets: _datasets
}
})