How can I update a nested state with arrays in React?

Question

I have a nested array, and I am trying to update some properties, but i don't know the syntax in react to do that.

this.state = {
databasesList: {
        name: 'Databases',
        toggled: true,
        children: [
          {
            name: 'OneDatabase',
            children: [
              { name: 'collection1' },
              { name: 'collection2' }
            ]
          }
        ]
      }
}

I am trying to update with this, but it does not work:

this.setState({ this.state.databasesList.children[0].children: newData })

As a side note, the argument to setState() should be an object. The argument you tried isn't a valid Javascript object, you need square brackets if you want to use variables as the key name: this.setState({ [some.nested.object.value]: 5 }) — Jayce444
– Jayce444, Commented Apr 10, 2019 at 23:17

viciousP · Accepted Answer · 2019-04-10 23:15:13Z

1

To set nested state in React you should use JS spread operator so in your example it should be something like this:

this.setState((prevState) => ({
  ...prevState,
  databasesList: {
    ...prevState.databasesList,
    children: {
      ...prevState.databasesList.children[0],
      children: {
        newData,
      },
    },
  },
}));

answered Apr 10, 2019 at 23:15

viciousP

5203 silver badges15 bronze badges

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

Comments

stwilz · Accepted Answer · 2019-04-10 23:32:46Z

0

If you want to use lodash set here's a pretty nifty solution. https://twitter.com/stwilz/status/1092958989208317952

But if you just want to use set on it's own this would be the way to go.

    const yourFunction = newData => this.setState(state => set(state, ['databasesList', 'children', 0, 'children'], newData));

The spread operator works fine as well. It just gets super verbose when you have a huge state object.

answered Apr 10, 2019 at 23:32

stwilz

2,4172 gold badges23 silver badges26 bronze badges

Collectives™ on Stack Overflow

How can I update a nested state with arrays in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related