Preview
Video Player
00:00
00:00
Adding Items to State
10:35Now 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.
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