Preview
Video Player
00:00
00:00
Update State Based on a Player's Id
5:01In this video, we'll finish writing the handleScoreChange function by updating state based on the index of a player object.
So now, how do we distinguish which
player scores should be updated onClick?
0:00
For starters, I'll set
the handleScoreChange function to accept
0:06
the id of the player whose score should
change just before the delta parameter.
0:10
Before making any changes to the state,
I'll console.log the id and
0:17
the delta to test if this works.
0:22
The players id is already been
passed down to the Player component.
0:31
So let's pass the id down one
more level to the Counter.
0:39
In Player.js, provide the Counter
tag a prop named id, and
0:44
pass the id coming in
from props with props.id.
0:49
Let's save our file and
navigate to Counter.js.
0:56
Finally, let's pass the id to
each button's onClick event,
1:01
which we can access with props.id.
1:06
First, outside of the return statement,
I'll pass props.id to the variable id.
1:09
Then pass id as a first
argument to props.changeScore.
1:20
Let's save and test our changes.
1:30
In the console,
we see that each player now logs its id.
1:33
With that working, we can now write
the code to update the score state.
1:39
All right, let's go back to App.js.
1:44
In the handleScoreChange function,
I'm gonna uncomment our
1:48
setScore and delete the console.log.
1:52
Before, we called the setScore
function to update the score state.
1:55
But since we don't have
a score state anymore,
2:00
we need to use the setPlayers function
that we received from the
2:03
useState hook to be able
to update our players.
2:08
So we'll change setScore to be setPlayers.
2:12
We need to update the player score
based on the previous score.
2:17
And to do that,
we'll write prevPlayers => prevPlayers.
2:21
We need to look through the player array
to find which player matches the id,
2:32
and add delta to the score.
2:37
So to do that,
let's call the map method on prevPlayers.
2:40
So for each player in the array, we wanna
check if the id matches the player id.
2:44
And if it does,
we will return a new player object.
2:50
And if it does not,
we'll just return the same player.
2:53
We'll start off by writing an if
statement that will check if the player's
2:57
id matches the parameter id.
3:02
And if so, we'll add delta to the score.
3:04
To write an if statement,
we'll type in if () and {}.
3:07
The condition we're checking is if the
player id matches the id of the parameter.
3:14
When the condition is met, we wanna
return to map the new player object.
3:23
The name will remain the same.
3:28
So we'll pass name, player.name.
3:30
Then we'll give it a score.
3:33
So we'll write score, and
it'll be player.score + delta.
3:35
Lastly, we'll pass the id, and
that should also stay the same.
3:42
So we'll pass player.id.
3:45
So if the player id doesn't
match the parameter id,
3:50
we wanna just return the player object.
3:53
So we'll write return and
pass player to it.
3:55
Let's go over
the handleScoreChange function.
3:59
So it's taking in the id of the player and
the delta the score should change by.
4:02
Then we call the setPlayers function,
4:08
which takes in the prevPlayers and
maps through the array.
4:10
If the player id matches
the id in the parameter,
4:17
we'll return to map a new player
object with the same player name,
4:21
the score changing by delta,
and with the same player id.
4:27
If the player's id doesn't
match the parameters id,
4:33
then we just return the player object.
4:36
Let's save and test out our changes.
4:40
Our score counters work again.
4:43
We successfully communicated data
from inside the Counter component,
4:45
up to the parent App component.
4:50
Functionally, we're back
to where we were before.
4:53
But now our state is in one place,
4:56
which will be useful when we
build the Stats component.
4:57