Update State Based on a Player's Index
2:54In this video, we'll finish writing the handleScoreChange function by updating state based on the index of a player object.
Video Update
While updating the score state of a player, you may have noticed that prevState references the same object as this.state. For example, in React DevTools, you might see a new score property added to the state object when you update a player's score:
In the video, we used prevState in this.setState() to update a player's score based on the previous score. It turns out that prevState is in fact still a reference to the previous state object, and it should not be directly mutated.
A better way to update a specific player's score might be as follows:
handleScoreChange = (index, delta) => {
this.setState( prevState => {
// New 'players' array – a copy of the previous `players` state
const updatedPlayers = [ ...prevState.players ];
// A copy of the player object we're targeting
const updatedPlayer = { ...updatedPlayers[index] };
// Update the target player's score
updatedPlayer.score += delta;
// Update the 'players' array with the target player's latest score
updatedPlayers[index] = updatedPlayer;
// Update the `players` state without mutating the original state
return {
players: updatedPlayers
};
});
}
This will build a new object based on the data from prevState, which update a player's score state without mutating this.state:
This seems like the safest approach, especially when managing state across larger applications.
Kudos goes to students in this thread for pointing this out and making suggestions. The project files are also updated to reflect the change. :)
-
0:00
So now, how do we distinguish which player's score should be updated onClick?
-
0:04
Well, for starters, I'll set the handle score change function to accept the index
-
0:09
of the player whose score should change, just before the delta parameter.
-
0:13
Then, I'll cancel that log, the index in the delta, just to test if this works.
-
0:26
Now we need to pass a players index down to the player component.
-
0:30
The map callback function takes an optional index parameter that contains
-
0:34
the index of the current item being processed in the array.
-
0:38
When an error function takes more than one parameter,
-
0:40
we need to place them inside the parenthesis.
-
0:42
So I'll add the index parameter inside the parenthesis right after the player
-
0:47
parameter.
-
0:48
Now, I'll give the player component a new prop named index,
-
0:54
and pass it the player index with the value index.
-
0:58
Next, let's pass the index down to one more level to the counter,
-
1:04
in player.js I'll provide the counter tag a prop named index and
-
1:11
pass it the index coming in from props with props.index.
-
1:16
I'll finally pass the index to each buttons onClick event which we can
-
1:21
access with props.index.
-
1:23
First, just above the return,
-
1:26
I'll assign props.index to the variable index.
-
1:34
Than pass index as the first argument to props.change score.
-
1:44
All right let's try it.
-
1:46
Over in the console we see that each player now logs it's distinct index.
-
1:56
And now we can write the code to update the scores state.
-
1:59
Back in the handleScoreChange function,
-
2:02
I'll remove the console.log method and uncomment this.setState.
-
2:08
And now to update a player's score based on the previous score,
-
2:16
we'll write prevState.players at
-
2:20
the given index.score += delta.
-
2:25
So it's updating the score state of a player object at
-
2:29
the given index by the value passed in for delta.
-
2:33
Over in our app, our score counters work again.
-
2:37
Great, so we've successfully communicated data from inside
-
2:42
the counter component up to the parent app component.
-
2:45
Functionally we're back to where we were before.
-
2:48
But now our state is in one place,
-
2:50
which will be useful in the next video when we build the stats component.