React update State Array inside of Array

Question

I'm currently try to update the state object inside of my react class based component.

The problem is that my state is an 2 dimensional array which looks like this:

this.state = {
  items: [
    {
      title: 'first depth',
      items: [
        {
          title: 'second depth',
        },
      ],
    },
  ],
};

For updating the first depth of the array inside my state object I use this code:

this.setState(({items}) => ({
  items: [
    ...items.slice(0, index),
    {
      ...items[index],
      title: 'new Title',
    },
    ...items.slice(index + 1),
  ],
}));

But I cannot update the second depth of the array inside my state.

Does someone has an idea how to update the second depth?

Hi, do you need to update all elements at once? if not you could just get the second deep item, update its content and then update the main array — Ricardo Sanchez
– Ricardo Sanchez, Commented Oct 2, 2020 at 8:18

Daniil Loban · Accepted Answer · 2020-10-02 08:30:23Z

2

create new state by spread, then change inner array by splice:

this.setState((oldState) => {
   const newState = {...oldState}; 
   const newItem = { ...newState.items[index],  title:"new Title"};
   newState.items.splice(index, 1,  newItem);
   return newState;
}

answered Oct 2, 2020 at 8:30

Daniil Loban

4,4061 gold badge18 silver badges23 bronze badges

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

Comments

saulmaldonado · Accepted Answer · 2020-10-02 08:44:32Z

Following the same pattern, you will need the index of the 2nd depth item you want to change.

this.setState(({items}) => ({
  items: [
    ...items.slice(0, index),
    {
      items: [
        ...items[index].slice(0, indexOf2ndDepth),
        {
          title: 'new Title'
        },
        ...items[index].slice(indexOf2ndDepth + 1),
      ],
      title: 'new Title',
    },
    ...items.slice(index + 1),
  ],
};
}));

This can get pretty complex and I recommended you isolate the 2nd depth array first, make changes, and insert it into the 1st depth array


this.setState(({ items }) => {
  const secondDepthArray = [
    ...items[index].slice(0, indexOf2ndDepth),
    {
      title: 'new Title',
    },
    ...items[index].slice(indexOf2ndDepth + 1),
  ];

  return {
    items: [
      ...items.slice(0, index),
      {
        items: secondDepthArray
        title: 'new Title',
      },
      ...items.slice(index + 1),
    ],
  };
});

Dharman · Accepted Answer · 2020-10-02 08:18:16Z

-1

To do that you can store your state in variable and update your array after that use prev prevState to update your State your array

edited Oct 2, 2020 at 8:18

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 2, 2020 at 8:12

MOUTAIROU Bastou Abdel

1591 gold badge1 silver badge8 bronze badges

Comments

Anhdevit · Accepted Answer · 2020-10-02 08:19:39Z

-1

You can clone new array from state

const newItems = [...this.state.items]
// And then modify it

So if you want to update array just setState

this.setState({items: newItems})

answered Oct 2, 2020 at 8:19

Anhdevit

2,0683 gold badges19 silver badges36 bronze badges

1 Comment

David Barker Over a year ago

Spread is a shallow clone, you need to clone each nested array also to answer the ops question.

Collectives™ on Stack Overflow

React update State Array inside of Array

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related