Update state of an object within the array - React

Question

I have a state and within that state there is a list with several objects. What I basically want to do is take an index from this array, in this case [0], and change its state. So, in short, I want to take {id: "1", value: "world1"}, and change the id to 'something'. I made a code but it didn't come out as I expected.

this.state = {
   myState: [
              { id: "1", value:"world1" },
              { id: "2", value:"world2" },
              { id: "3", value:"world3" },
            ]
   }

const result = this.setState(prevState => ({
      myState: {
        ...prevState[0].id,
        id: 'something'
      }
    }))

console.log(result)

Luis Sardon · Accepted Answer · 2021-05-13 17:42:17Z

1

Not sure why you need this, but the issue I'm seeing here is that myState is initially an array, and then you're passing it back as an object.

Try this:

const result = this.setState(prevState => {
  prevState.myState[0].id = 'something';
  return prevState;
})

answered May 13, 2021 at 17:42

Luis Sardon

5243 silver badges9 bronze badges

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

1 Comment

bel3atar Over a year ago

This will mutate the previous state

bel3atar · Accepted Answer · 2021-05-13 17:46:54Z

1

const state = {
  myState: [{
      id: "1",
      value: "world1"
    },
    {
      id: "2",
      value: "world2"
    },
    {
      id: "3",
      value: "world3"
    },
  ]
}

const setState = (({
  myState
}) => {
  const newState = {
    myState: [...myState]
  }
  const array = newState.myState
  const targetIndex = array.findIndex(({
    id
  }) => id === '1')
  const item = array[targetIndex]
  array[targetIndex] = { ...item,
    id: 'something'
  }
  return newState;
})

console.log(setState(state))

answered May 13, 2021 at 17:46

bel3atar

9436 silver badges6 bronze badges

Comments

Tomasz Kleszczewski · Accepted Answer · 2021-05-13 18:06:28Z

1

Use Array.prototype.map and object spread operator

this.setState(prevState => {
    return {
        myState: prevState.myState.map(
            myStateItem => {
                if(myStateItem.id === '1') {
                    return {
                        ...myStateItem,
                        id: 'something'
                    }
                }
                return {
                    ...myStateItem
                }
        })
    };
});

edited May 13, 2021 at 18:06

answered May 13, 2021 at 18:01

Tomasz Kleszczewski

563 bronze badges

Collectives™ on Stack Overflow

Update state of an object within the array - React

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related