Use SetState to update one of the item in array object in react

Question

I have a state object called items.

items: [
    {
      name: 'John'
      id: '1',
      checked: false,
    },
    {
      name: 'Dude'
      id: '2',
      checked: true,
    }
]

On UI Click i need to update checked property to true of item with id = 1 How do i use the setState for the items for updating one(single) item in the items

Possible duplicate of [Whats the best way to update an object in an array in ReactJS?](https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs) — nahuelhds, May 14 '19 at 18:25

score 2 · Accepted Answer · answered May 14 '19 at 18:25

Something like this? Explanation in the comments:

onClick(id) {
  // Create a temporary copy of your items array
  const itemsCopy = this.state.items.slice();

  // Find the index of the items where the item has the id you want
  const idx= itemsCopy.findIndex(x => x.id === id);

  // Re-assign the item to have the same values as before (name and id), but change the checked to true
  itemsCopy[idx] = {...itemsCopy[idx], checked: true};

  // Update the state with our modified copy
  this.setState({items: itemsCopy});
}

score 1 · Answer 2 · answered May 14 '19 at 18:24

1

const {items} = this.state;
const index = items.findIndex(val=>val.id ===1);
items[index].checked = true;
this.setState({items});

answered May 14 '19 at 18:24

Omer Khan

437
2
8

Dmytro Chumachenko · Answer 3 · 2019-05-14T18:44:31.480

1

The 'items' object in state should be updated. So slice can be used to copy array. And it should be enough to set it back to state, so component will understand that state is changed.

let items = this.state.items.slice();

const index = items.findIndex(val => val.id === 1);
items[index].checked = true;
this.setState({ items });

edited May 14 '19 at 18:44

answered May 14 '19 at 18:38

Dmytro Chumachenko

81
5

Use SetState to update one of the item in array object in react

3 Answers3