React Native updating single property of nested object in state

Question

I am attempting to update a single property of a nested state object and return it to the state. I have the index of the object that I need to update but I am struggling to change one property and add the new object back to the state.

My state object looks like this and I am trying to reduce the lives of a player on a button press.

I have been playing around with using array filter, trying to copy the object and add it back into the state but this then loses the objects position.

this.state = {
  players: {
    {id: 1, lives: 3, name: something},
    {id: 2, lives: 3, name: something}
  }
}

public removeLife(id): void {
   const player = this.state.players[id];
   player.lives = player.lives - 1;
   this.setState({players[id]: {...player}
   })
}

Any help would be greatly appreciated.

Brad Waterhouse · Accepted Answer · 2019-08-12 13:33:21Z

2

After doing some research I found that the best way to update a single object within a nested state is to shallow copy the state, change the object then re-assign the shallowed state object back to the state. Like this:

    public removeLife(event, id): void {
    const newState = Object.assign([], this.state.players);
    const indexOfPlayer = newState.findIndex(selectedPlayer => selectedPlayer.id === id);
    const player = newState[indexOfPlayer];

    player.lives = player.lives - 1;

    this.setState({players: newState})
}

answered Aug 12, 2019 at 13:33

Brad Waterhouse

3033 silver badges13 bronze badges

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

Comments

Idan · Accepted Answer · 2019-08-07 19:22:13Z

0

Because your state contains an object of objects I suggest you yo make it an array of objects :

this.state = {
  players: [
    {id: 1, lives: 3, name: something},
    {id: 2, lives: 3, name: something}
  ]
}

you need to handle update like this (update player in index 1 for example):

this.setState({
    players: {...this.state.players, 
       players[1]: {...this.state.players[1], lives: this.state.players[1].lives + 1 }
    }
})

or try it (i follow your function):

public removeLife(id): void {
   const player = this.state.players[id];
   player.lives = player.lives - 1;
   this.setState({players: {
       ...this.state.players,
       players[id]: {...player}
       }
   })
}

edited Aug 7, 2019 at 19:22

answered Aug 7, 2019 at 18:47

Idan

4,1531 gold badge33 silver badges34 bronze badges

7 Comments

Brad Waterhouse Over a year ago

That was a typo, I currently already have an array of objects. I can get the correct index of the object I want to update by using players[1] but the update part doesn't seem to work.

Brad Waterhouse Over a year ago

Really does not like the way the setState part is formed. Not sure if this is a typescript issue or not?

Idan Over a year ago

I edited again and added your function if it's not working tell me why and what happened after setState

Brad Waterhouse Over a year ago

Unexpected token, expected "," (52:23) 50 | this.setState({players: { 51 | ...this.state.players, > 52 | players[id]: {...player} | ^ 53 | } 54 | }) 55 | }

Idan Over a year ago

You right! i forgot something - change it to [players[id]]: {...player}

|

Collectives™ on Stack Overflow

React Native updating single property of nested object in state

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related