How to set state of a nested array in React (Edited)

Question

I have this set of data

this.state = { weeks: [ { weekNumber: 1, weights: [] }, { weekNumber: 2, weights: [] } ] }

What I want to do is create a new array and set it to 'weights'. I've checked other posts like this one: Set state of nested array

I assume I do something similar.

Edit: Also, say for instance I want to update each individual week's weights array, how would I go about doing that?

Are you trying to create a new entry in state called "weights" or create a variable called "weights"? — Cody Swann
– Cody Swann, Commented Apr 4, 2019 at 1:02
@CodySwann I figured I would create a new array variable and use that new array variable to update the state 'weights' — Bpicks
– Bpicks, Commented Apr 4, 2019 at 1:06
@Bpicks - take a look at react's immutability helpers—specifically, the update method. You can create a new state object and then use setState to update your entire state with the updated state. reactjs.org/docs/update.html — heyitsjhu
– heyitsjhu, Commented Apr 4, 2019 at 1:10
@heyitsjhu beat me to it. That's the best way. Otherwise, you have to do some nasty object extensions with the spread operator — Cody Swann
– Cody Swann, Commented Apr 4, 2019 at 1:19
@CodySwann `@heyitsjhu Ok, say for instance I want to update both weeks' weights' arrays. Would I just map through each week and update the state using the update method from immutability helpers? — Bpicks
– Bpicks, Commented Apr 4, 2019 at 1:42

namth · Accepted Answer · 2019-04-04 02:38:43Z

1

I usually use this solution:

const newWeeks = [ ...this.state.weeks ];
newWeeks[0] = { ...newWeeks[0] };
//modify `newWeeks`

this.setState({
  weeks: newWeeks
});

Update 1: Live version: https://codesandbox.io/s/20v7r2zx0j?fontsize=14&module=%2Fsrc%2FTest.js

Update 2: thank @bird. Problem is Spread only goes one level deep when copying an array(or object), so we need an extra step here:

newWeeks[0] = { ...newWeeks[0] };

edited Apr 4, 2019 at 2:38

answered Apr 4, 2019 at 1:28

namth

3,1371 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tam.dangc Over a year ago

This is not the way to clone a nested object. The weight property still a reference. Modified the newWeeks[0].weight cause change to this.state.weeks[0].weight also.

namth Over a year ago

Hi, you can see I created new array from old array using Spread syntax, It create new array with value, not reference, read more about it here > developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

tam.dangc Over a year ago

Just put console.log(this.state.weeks); at line 21 in your code sandbox, right after the newWeeks[0].weights = [1, 2, 3]; line. You will see the weeks[0].weights also modified, when setState action doesn't run yet.

tam.dangc · Accepted Answer · 2019-04-04 01:58:58Z

0

Because it's a nested object, then you can clone with native javascript code with JSON.parse(JSON.stringify(obj))

this.state = {
    weeks: [
        {
            weekNumber: 1,
            weights: []
        },
        {
            weekNumber: 2,
            weights: []
        }
    ]
}

const newWeeks = JSON.parse(JSON.stringify(this.state.weeks))

newWeeks[0].weights = [1,2,3]

this.setState({weeks: newWeeks})

The other normal clone like: [...this.state.weeks] or Object.assign([], this.state.weeks) only clone properties of level 1 not the nested, in your case, the weight property will not be cloned, just copied the reference in a normal way.

You can take a look at cloneDeep of lodash lib or use immer to archive your goal, also.

edited Apr 4, 2019 at 1:58

answered Apr 4, 2019 at 1:53

tam.dangc

2,0621 gold badge20 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to set state of a nested array in React (Edited)

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related