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
Now it's time to let users add players to the Scoreboard! First, we'll create an event handler that allows users to submit the form. Then we'll write a function that adds the new player to state and displays it in the UI.
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
Now it's time to let users add
players to the scoreboard.
0:00
We're going to use the Add Player
form to submit player names.
0:04
When the form submits, we'll add
the name along with initial score and
0:09
player ID to the player state.
0:13
First, we're gonna create an event handler
to allow users to submit the form and
0:18
then a function that will add a new player
to state and display it on the board.
0:23
Let's get to it.
0:28
Currently AddPlayerForm has no
access to the player state that's
0:32
maintained in the App component.
0:36
And the AddPlayerForm components
state is local state.
0:40
Meaning it's just state that's needed for
the component to do its job, and
0:44
no other components have access to it.
0:48
In order to add a player to state,
AddPlayerForm needs access to
0:51
the player state so that it can
update it with the submitted data.
0:56
You learned that we can use
a callback function to send data
1:02
up the component tree.
1:06
So that's what we're gonna do and we'll
work our way from the bottom up this time.
1:09
To begin creating a new player in state,
1:17
let's have the AddPlayerForm component
accept the callback function via prop
1:19
This function will be called
inside an event handler.
1:26
It will pass a new player name up to
the App component when the form submits.
1:31
In the AddPlayerForm function,
1:38
let's create the event handler as
an arrow function named handleSubmit.
1:40
First, we'll prevent the forms
default behavior by calling prevent
1:52
default on the event object.
1:57
If we don't prevent the forms
default submit behavior,
2:02
it will result in the browser posting
a request back to the server.
2:06
That will cause our application
to reload in the browser,
2:12
which means that we'll lose all of
our application state in the process.
2:16
After preventing the form's default
behavior, we'll call the function
2:21
that's gonna be passed via props
here with props.addPlayer.
2:25
We haven't created this function yet,
but we will soon.
2:34
Let's pass the functions callback,
the value state with value.
2:39
With the handler created,
2:44
let's add it to the form submit event
using Reacts built in onSubmit property.
2:46
As a value write an arrow function
with the event object being passed in.
2:55
And calling the handleSubmit function,
passing in the event object.
3:04
The onSubmit event will execute the
handleSubmit function as soon as the form
3:11
is submitted by either clicking the Submit
button or pressing the Enter key.
3:16
Alright,
3:23
now let's create the function that will
add a new player to the player state.
3:24
Remember, in handleSubmit
we're calling and
3:29
passing information to a function
via a prop named addPlayer.
3:33
So in App.js,
let's scroll to the bottom and
3:39
give the addPlayer form
component the prop addPlayer and
3:43
pass it a function named handleAddPlayer.
3:48
We haven't written this function yet,
so let's do that now.
3:54
Below the handleScoreChange function,
3:58
create an arrow function
named handleAddPlayer.
4:01
The function will take
a name parameter for
4:05
the name of the player being submitted.
4:08
In the function, we'll update
the player state using setPlayers.
4:12
Since player state is an array of objects,
I'll pass setPlayers an array.
4:17
In it, I'll add a new object literal,
this is going to be the new player.
4:25
Each player object in state has three
properties, name, score, and ID.
4:31
I'll create a new player object using
the name passed to the function and
4:38
set the default score to zero.
4:43
To make the object more concise,
whenever a key and
4:48
variable name match,
we can use the ES 2015 shorthand syntax.
4:53
By writing just the key name, we can write
the name property and value as just name.
4:58
Now we need to come up with
a unique ID for each new player.
5:09
There are different ways we can do this.
5:13
What I'll do is create a counter state
here just below the initial state object.
5:17
I'll name it nextPlayerId and the function
to update it as setNextPlayerId.
5:23
We're going to increment its value by one
every time we add a player to the state.
5:30
As the initial value,
since we use the IDs one through four here
5:36
in the state, I'll initialize
the next ID the number five.
5:41
In the handle add player function,
5:47
I'll supply a unique ID to each
new player as they're created.
5:50
By setting the value of the ID property
in setPlayers to nextPlayerId.
5:55
to increment the nextPlayerId
state by one,
6:04
let's call the setNextPlayerId function.
6:08
Since the new state is computed
using the previous state,
6:13
you can pass a function
to setNextPlayerId.
6:18
The function will receive
the previous value and
6:21
return an updated value of prevId plus 1.
6:26
Again, there's other ways we
could create the ID by, for
6:29
example, creating a function
that generates a unique ID.
6:34
Or using a generate ID
hook provided by React.
6:40
Finally, we need to bring in all
the existing player objects in state and
6:46
combine them with a new player
object being added to the state.
6:51
There's more than one
way we could do this.
6:56
I'll start off by passing setPlayers
a function that receives prevPlayers.
6:59
Then I'll use the spread operator
to bring in a copy of the existing
7:09
player objects in state into
this updated players array.
7:14
This merges the existing objects in
the original player state with a new array
7:19
being created here.
7:24
That way we're not modifying or
mutating the original players array.
7:26
All right, we're just about
finished with this feature.
7:32
Let's save and
have a look at what we built so far.
7:36
I'll type a player name
into the text field.
7:41
Let's do Laura.
7:44
Then press the Enter key or
click the Submit button.
7:45
We see the new player added to
the bottom of the player list and
7:49
the total players' stat updates to 5.
7:54
In React dev tools,
we see a new player object in state.
7:57
Inspect the new player component and
8:01
you'll see that the new ID of
5 was created as a key value.
8:04
If we add another player,
let's say Dustin,
8:10
the key value increments by one,
and so on.
8:14
Great.
Finally,
8:19
the text field should clear
once the user submits a name.
8:20
To clear it, I'll go back to
the handle submit function in
8:25
AddPlayerForm.js and
update the value state to an empty string.
8:30
Now when I submit a new name,
we see the text field clear on Submit.
8:38
If the handleAddPlayer function we
wrote still feels a bit confusing,
8:44
don't worry, it was confusing for
me at first.
8:49
Let's take a little time here to
unpack this function to help drive
8:52
home the logic.
8:57
Anytime I'm examining how a piece of
code works I like to use console.log and
8:59
remove or change parts of the code to see
how it affects the program or the UI.
9:05
So in the console,
9:13
let's display the spread operator of
the player state by writing ...players.
9:15
We also need to go back to
the AddPlayerForm.js and
9:21
remove the console log statement that we
added earlier so we don't get confused.
9:24
In the browser, let's submit a new player.
9:31
Notice how the console logs all but
the new player being added to state.
9:34
That's because the spread
operator followed
9:40
by players represents the players
in state before state was updated.
9:42
To better demonstrate,
9:48
I'll comment out the spread
operator from the player's array.
9:49
When I submit a new player, notice how
the original players disappear from
9:54
the scoreboard, and
we're left with just the new player.
9:58
They've also been removed from state.
10:03
If you include the new player
object first in the array, and
10:06
the spread operator below the object.
10:09
Notice how each new player gets
added to the top of the list.
10:14
Include the spread as the first
item of the array, and
10:20
the new player gets added
to the bottom of the list.
10:23
Again the spread operator here
represents all the existing players on
10:28
the scoreboard,
before a new player is submitted.
10:32
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