Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Components!
You have completed React Components!
Preview
In this video, we'll finish writing the handleScoreChange function by updating state based on the index of a player object.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up