setState in nested arrays in react

Question

I have a React state object with two arrays inside of it.

this.state = {
  data2: {
    nodes: [{id: 'input'}],
    links: []
  },
};

I want to add new values to these arrays after some user action but I haven't figured out the right way. So far I have attempted something like this:

this.setState([...this.state.data2, {nodes: [...this.state.nodes,{ id: 'input2'}]}]);

Any ideas on how should I implement this?

Yahya Ahmed · Accepted Answer · 2019-01-08 09:28:21Z

2

I would recommend something like this

this.state = { 
    data2: {
    nodes: [],
    links: []
  },
};

when you set your state you dont have to use the this keyword inside the setState function

this.setState({ data2:{ nodes: [{id:'input1'},{id:'input2'}]} })

you can push objects in nodes array too

let temp = data2
temp.nodes.push({id:'input3'})
this.setState({ data2:temp })

edited Jan 8, 2019 at 9:28

answered Jan 7, 2019 at 18:25

Yahya Ahmed

3471 silver badge15 bronze badges

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

1 Comment

Noman Hassan Over a year ago

this could work too.. this.setState({ data2: Object.assign({}, this.state.data2, { nodes: [...this.state.data2.nodes, {id: 'input1'}, {id: 'input2'}] }) })

Ankur Kedia · Accepted Answer · 2019-01-07 18:41:10Z

1

It can be done in two simple ways. One which you did, using spread operator. Something like this,

this.setState({data2: {...this.state.data2, nodes: [{id: "input1"}]} });

Or you can use [Object.assign()][1] like this,

this.setState({data2: Object.assign({}, this.state.data2, nodes: [{id: "input1"}])});

answered Jan 7, 2019 at 18:41

Ankur Kedia

3,8831 gold badge16 silver badges15 bronze badges

Collectives™ on Stack Overflow

setState in nested arrays in react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related