React JS Update an object from an array

Question

I have an array of objects in my react state.

[
  {
    id: 'd8t4gf',
    title: 'Working on',
    items: [{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }],
  },
  {
    id: '8jy8g',
    title: 'Done',
    items: [{ title: 'Item 1' }, { title: 'Item 2' }],
  },
]

I'm trying to update the items of the second object like so.

const handleAddNewItemSubmit = (title, id) => {
  const listIndex = lists.findIndex((list) => list.id === id);

  const newData = [...lists];

  newData[listIndex].items = [...newData[listIndex].items, { title }];

  setLists(newData);
};

Is there a better way to do this?

CertainPerformance · Accepted Answer · 2021-04-12 05:55:31Z

2

You're mutating the existing state (specifically, an array object - eg lists[0]), which should never be done in React. What you're doing may happen to work, but it's not a good way.

Try something like this instead, cloning everything along the way down to the nested items property:

const handleAddNewItemSubmit = (title, id) => {
  setLists(
    lists.map(list => list.id !== id ? list : ({
      ...list,
      items: [...list.items, { title }]
    })
  );
};

answered Apr 12, 2021 at 5:55

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

4 Comments

Xaarth Over a year ago

Looks like I have to learn more about react state management, can you suggest any resource where I should about it?

Yves Kipondo Over a year ago

There isn't any direct mutation of array in the state, all complexe mutation are perform on the copy data const newData = [...lists];

CertainPerformance Over a year ago

@YvesKipondo The problem is the newData[listIndex].items =. newData is a shallow copy, not a deep copy. newData[listIndex] which gets mutated is a reference to a state object, not a new object.

CertainPerformance Over a year ago

@vajad57 "Avoid mutation" is pretty much the only hard and fast rule I know you absolutely should follow everywhere. Nothing else with regards to state management comes anywhere close in importance, I think

Nithish · Accepted Answer · 2021-04-12 06:30:20Z

const handleAddNewItemSubmit = (title, id) => {
  const listIndex = lists.findIndex((list) => list.id === id);

  const newData = [...lists];

  newData[listIndex].items = [...newData[listIndex].items, { title }];

  setLists(newData);
};

In the above code, when you do const newData = [...lists] it just do shallow copy, i.e., only the top level references will be different but if there are any nested objects, they'll have same references as of lists.

So when yo do newData[listIndex].items you are actually referring to the same object i.e., lists[listIndex].items. Since newData[listIndex].items is an array which in turn is an object it'll have the same reference as of lists[listIndex].items.

So, ultimately you end up mutating the state. In order to avoid that, we can do the state update in different ways

const handleAddNewItemSubmit = (title, id) => {
  setLists(oldLists => oldLists.map(list =>
    list.id === id ? ({
      ...list,
      items: [...list.items, { title }]
    }) : list))
}

Below I have simulated two examples one which mutates top level object, another which mutates nested objects after spreading.

let lists = [
  {
    id: 'd8t4gf',
    title: 'Working on',
    items: [{ title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }],
  },
  {
    id: '8jy8g',
    title: 'Done',
    items: [{ title: 'Item 1' }, { title: 'Item 2' }],
  },
];

const addNewTitleOnTopLevel = (title) => {
  const newData = [...lists];
  newData.push({id: '123', title});
  
  //Since doing `[...lists]` will do a shallow copy, the lengths will be different;
  console.log(newData.length, lists.length);
  //The objects are different so, it'll be false.
  console.log(newData === lists);
}

const addNewTitleInnerItems = (title, id) => {  
  const listIndex = lists.findIndex((list) => list.id === id);  
  const newData = [...lists];
  newData[listIndex].items = [newData[listIndex].items, {title}]
  
  //Since `newData[listIndex].items` & `lists[listIndex].items` 
  //are pointing to same references, their length will be same
  console.log(newData[listIndex].items.length, lists[listIndex].items.length);
  //To know if they both are same or not
    console.log(newData[listIndex].items === lists[listIndex].items);
}

addNewTitleOnTopLevel("test");
addNewTitleInnerItems("test", '8jy8g');

Collectives™ on Stack Overflow

React JS Update an object from an array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related