Feedback on Updating State Array of Objects in React

Question

I'm making a fairly simple React app to get some of the key concepts, however, I'm struggling a bit with updating my state. I got it to a point where it's working but it's not exactly working as intended.

this.state = {
      list: [{
        id: 1,
        title: 'Figure out how to update state',
        completed: false
      },
      {
        id: 2,
        title: 'Drink less coffee',
        completed: false
      }]
    }

completeItemHandler = (id) => {
    this.setState(prevState => {
      const list = prevState.list.filter(item => item.id === id);
      list[0].completed = true;
      return ({...list})
    },() => console.log(this.state))
  }

the console log returns:

{
    "id": 1,
    "title": "Figure out how to update state",
    "completed": true
},
list: [
    {
        "id": 1,
        "title": "Figure out how to update state",
        "completed": true
    },
    {
        "id": 2,
        "title": "Drink less coffee",
        "completed": false
    }
]

so it looks like it's both updates the state and appended that list object to the state as well which is obviously not what I want. Could someone please explain where I went wrong with this please? I'm not sure why it's created a new object in the state while also updating the object in the list array of objects.

Any help would be much appreciated and a solution to this would be appreciated also!

Kirill Skomarovskiy · Accepted Answer · 2022-01-31 05:22:58Z

1

Because you spread array list to Object. I would suggest use prevState.map instead filter -> mutation and spread.

prevState => ({
  …prevState,
  list: prevState.list.map(item => {
    if (item.id !== id) return item;

    return {
      …item,
      completed: true,
    };
});

edited Jan 31, 2022 at 5:22

answered Jan 30, 2022 at 18:29

Kirill Skomarovskiy

1,5751 gold badge9 silver badges10 bronze badges

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

2 Comments

tjburton Over a year ago

Hey, that works, thanks a million. Only thing missing from your code was prevState.list.map(item => ... but you mentioned it in your response so was easy to figure out what the issue was. Thanks a million!

Kirill Skomarovskiy Over a year ago

@tjbuton. Yep thx. I changed my answer

tjburton · Accepted Answer · 2022-01-30 20:04:28Z

Got this to work using:

completeItemHandler = (id) => {
    this.setState( prevState => {
      const listIndex = prevState.list.findIndex(item => item.id === id);
      //prevState.list[listIndex].completed = !prevState.list[listIndex].completed; // doesn't work
      prevState.list[listIndex].completed = true; //works

      return (
          {...prevState}
      )
    },() => console.log(this.state))
  }

However, this resulted in some weird behaviour doing prevState.list[listIndex].completed = !prevState.list[listIndex].completed; where it wouldn't work. The console.log would output the right value but the state would never update with it.

@Kirill Skomarovskiy's answer is a lot easier to read/ understand for me compared to that so I've used that instead

Collectives™ on Stack Overflow

Feedback on Updating State Array of Objects in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related