How does the setState method know what player's score to change?

@Joshua O'Brian has the correct idea +1 !

For me, the code shown by Joshua O'Brian makes the most sense! Can we agree that the version shown in the video is some kind of queer version of using setState() and we should not try anymore to understand how the hell it's happening to make its job?...

I'm not quite sure if you understood my question.

I understand how "prevState.players[index].score" equals the previous score for the player, adding the change to it gives us our new score. But how does setState know what "score" we are trying to set?

Look at my code again:

this.setState(prevState => ({ score: prevState.players[index].score += change }));

We are setting "score" equal to "prevState.players[index].score += change". I want to know how setState knows what player "score" is referring to.

Should it not look something like this?:

this.setState(prevState => ({players[index].score: prevState.players[index].score += change}));

It is still unclear for me, how the function know which player to update? does

prevState.players[index].score += change 

returns a new copy of the whole state?

ok, here is what's actually happening.

I've rewrote code a little bit, so it's more clear.

First they mutate the previous state by increasing the player's score. Then they add some random variable to state and name it 'score' what is very confusing. So eventually what you get is mutated players array + useless 'score'

    handleScoreChange = (index, delta) => {
        this.setState(prevState => {
            prevState.players[index].score += delta;
            return {
                score: 1
            }
        });
    };

Hope it helps.

this simple solution is working fine for me.

 this.setState( prevState => (prevState.players[index].score += delta));

Showing the output of the state to the log after update shows score added as a new state item in addition to the players. This isn't what is intended and I believe the code in the video is wrong.

The update to the score is happening in the line prior to the return in the code below. My initial implementation returned an updated players array. It seems that is not necessary since we have a reference in prevState to the actual player whose score needs to be updated, and this can be done via prevState.players[index].score += delta;

Perhaps a future video clarifies this issue but my conclusion is that returning an empty object is what is needed as shown below, and in my testing this works fine.

The corrected code that I have tested follows, please note return {}

  this.setState( prevState => {
      prevState.players[index].score += delta;
      return { }
    });
  }

This was driving me nuts. I ended up doing this. It updates the players array without adding the extra score property to state (the one that appears outside of the players array in React DevTools.

handleChangeScore = (delta, index) => {
  let players = [...this.state.players]  //spread the players array from state into a new players array
  players[index].score += delta;       //update the score of the player at the index
  this.setState({players: players});   //update state the players property in state with new players array with the updated scores
}

I still don't know how the original code in the video managed to update the correct player's score AND create the extra score property in state. Any feedback on what I have here?

If I'm understanding correctly, what Leonardo Guzman and rlogwood are saying is that adding the extra object into setState is what helps to force state to update? Like, it could be literally anything? Still messing with this. Maybe I'll have a better handle on it in a minute.

This also seems to work just fine. Much closer to what's in the video, but simpler, and it doesn't produce the extra useless property in state:

handleChangeScore = (delta, index) => {
  this.setState( prevState => {
    return prevState.players[index].score += delta
  });
}

Steven Parker, Guil Hernandez any insight in why the code of the video works? All around the Internet it says setState doesn't handle nested states, but here this

this.setState(prevState => ({ score: prevState.players[index].score += change }));

is working, and it also creates a new score property in the state object. How does setState know which player to modify? Perhaps it's something related to the event handlers and where the changeScore function is called from?

handleScoreChange(index, d) => { this.setState((state) => { const players = [...state.players]; players[index].score += d; return { players: players } } }