Set state of nested Array object?

Question

How can I setstate of value object inside datasets.I tried to set the state by below approach but got the error.

this.setState({ datasets: { ...this.state.datasets, value: labels} });

//code for state

this.state = {
            labels: ['January', 'February', 'March',
                'April', 'May'],
            datasets: [
                {
                    label: 'Rainfall',
                    backgroundColor: 'rgba(75,192,192,1)',
                    borderColor: 'rgba(0,0,0,1)',
                    borderWidth: 2,
                    value: [65, 59, 80, 81, 56],
                }
            ]
        }

What error? Also, you should use functional update for `setState`. — devserkan, May 13 '20 at 01:26
This seems a separate problem. Though it could be related to setting the state wrong but maybe it is not? Please provide more code by updating your question. — devserkan, May 13 '20 at 01:36
After the second answer, I saw that your `datasets` is an array and you want to update it with incoming `labels` right? So, `labels` should replace the first `datasets`' `value`? — devserkan, May 13 '20 at 01:43
Does this answer your question? [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — Emile Bergeron, May 13 '20 at 01:48

score 0 · Accepted Answer · answered May 13 '20 at 01:41

0

In your state, datasets is an array. However, in the setstate call you are destructuring it as an object. You should do this to get it to work:

this.setState({ datasets: [ {...this.state.datasets[0], value: labels }] });

answered May 13 '20 at 01:41

rivnatmalsa

552
4
13

1

Ah, I missed that it is an array. Ok, for one item this should work, also I suggest using functional `setState` here. – devserkan May 13 '20 at 01:42
Agreed. I just pointed out the mistake OP was making in his original code, but I hope he takes note of it and uses the functional setState in his actual code. – rivnatmalsa May 13 '20 at 01:49

score -1 · Answer 2 · answered May 13 '20 at 01:35

-1

Not sure I'm totally clear on what you are trying to do, but I think the issue is that state.datasets is an array of objects, and you aren't addressing a particular element in the array. You may want to try something along these lines:

this.setState( state => { 
    let newData = state.datasets[0]
    newData.value = labels
    return newData
}

answered May 13 '20 at 01:35

justin

192
1
6

1

Not a good way for updating state. Do not assign any state property to variable and change it. It mutates the state. – devserkan May 13 '20 at 01:36
See [Why can't I directly modify a component's state, really?](https://stackoverflow.com/q/37755997/1218980) – Emile Bergeron May 13 '20 at 01:47
But I'm not mutating state directly. I am using the functional this.setState. How is that a problem? – justin May 13 '20 at 02:05
1

They are different things I guess. You are using the functional update but still, mutating the current state you have there. PS: I'm not the one downvoted you :) – devserkan May 13 '20 at 02:15
@justin it's a common mistake in React that comes from a misunderstanding of assignment/copying. When you assign `newData`, [it copies a reference to the same state object](https://stackoverflow.com/a/37290849/1218980), which you then mutate. Why it's a mistake in React is explained really well in the other link I shared. – Emile Bergeron May 13 '20 at 02:31
Did a bunch of reading up and feel much better informed on safely updating state. Learning good stuff - thanks for all the info and explanation! – justin May 13 '20 at 23:27

Set state of nested Array object?

2 Answers2