Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
To manage an input field's state, we need to build a "controlled component." A controlled component renders a form element whose values are controlled by React, with state.
Now that you have the hang of sharing
state between components and updating data
0:00
in the Scoreboard app, let's keep it going
by adding players to the scoreboard.
0:04
We'll create a form with a text field for
naming the new player, and
0:09
a button that will add
the player on formSubmit.
0:13
As you'll learn,
0:15
form elements in React work differently
than regular HTML form elements.
0:16
We'll start by creating a new
component named addPlayerForm.
0:21
So let's create a new file in our
project named AddPlayerForm.js.
0:25
As usual, we'll import React at the top of
the file with import React from 'react'.
0:31
Since this is going to be a stateful
component, it needs to be a class.
0:39
So let's also import component from react.
0:43
Then define the class with class
AddPlayerForm extends Component,
0:50
inside the class, add the render method,
0:58
and the return statement inside that.
1:03
Let's also export the class
at the bottom of the file
1:07
with export default AddPlayerForm.
1:12
All right,
now let's create the form elements.
1:17
In the return statement,
add opening and closing form tags.
1:20
Inside the form add an input with a type
1:26
attribute set to, "text".
1:31
And a placeholder attribute with
the value, "Enter a player's name".
1:37
Keep in mind that JSX requires a self
closing tag on imput elements,
1:47
otherwise react will throw a syntax error.
1:53
Next, we'll create the submit
button with an input
1:57
element with a type
attribute set to submit.
2:02
And we will have it display the text
add player with a value attribute.
2:06
Now let's display this form
inside the main app component.
2:14
At the top of App.js.
2:20
Let's import AddPlayerForm
from ' ./AddPlayerForm',
2:24
and we'll add the AddPlayer PlayerForm
tag right beneath the Players list.
2:30
Let's have a look in the browser,
and good!
2:43
the structure of our form is all set.
2:46
In React, form elements work differently
from other elements because form elements
2:50
naturally keep some internal state.
2:54
input fields in html for
example are typically considered stateful.
2:56
When you type into a text field,
you are changing it's state.
3:00
The values update based on user input.
3:03
In react, we need to handle
a form element state explicitly.
3:07
For example, if I set the text fields
value to Guil, then try to type
3:11
inside the text field Notice how
I'm not able to change the value.
3:15
This definitely seems strange and
not what you'd expect to happen, so
3:20
why does this happen?
3:24
You see,
when a user types into a text field,
3:25
they are changing the state
of the text field.
3:28
I set the value of the input to Guil.
3:31
So if its state were to change, by typing
into it, it would mean that the updated UI
3:33
state is out of sync with the code,
which is explicitly set to the value Guil.
3:38
So React doesn't allow that change,
for good reason.
3:43
To manage our input field state,
3:47
we'll need to build what's
called a controlled component.
3:48
A controlled component renders a form that
controls what happens in that form on
3:52
subsequence user input.
3:56
In other words it's a form element whose
value is controlled by a react with state.
3:58
Creating a control component for
an input element usually works like this.
4:04
You create a state for
the value of the input then listen for
4:08
changes on that input to detect when the
value is updated from typing into it, for
4:12
example and create an event handler that
updates the states to the new value.
4:17
Setting the inputs value
property to the state,
4:22
ensures that the content in the text
field is always in sync with the state.
4:25
So let's implement that now.
4:30
First, let's create the component
state in the add player
4:31
form class by adding the state property,
equal to an object.
4:36
Inside of the project add
the property value and
4:41
set it to an empty string initially.
4:45
Then, we'll set the input value
property to this.state.value.
4:49
Next, let's provide our input
reacts built in on change event.
4:54
The on change event gets triggered
immediately after each change.
4:59
For example, when the user
types in to the input element.
5:03
Let's pass it the event handler to
execute with this.handleValueChange.
5:06
Now, let's create the handleValueChange
function that will update the value state.
5:14
This error function will be passed a Dom
event for the change in the element.
5:20
This is actually a normalized
event created by React.
5:26
React uses a cross-browser wrapper
around the browser's native event called
5:31
syntheticEvent.
5:36
So that the cross-browser differences
of DOM events won't get in our way.
5:37
You can learn more about the React
synthetic event in the teacher's notes.
5:41
Inside the function, we'll update
the value state with this.setState,
5:46
passing it an object and
the property to update, value.
5:51
The event object provides
a target property,
5:54
which points to the underlying
input element in the dom.
5:58
We can read the value from it and
use it to update our state
6:02
with e.target.value Alright
our event handler is complete.
6:08
Now in the render method
I'll log the value
6:14
state to the console to see what we get.
6:19
Over in React dev tools,
we can inspect the AddPlayerForm
6:37
component And
see the State update as we type.
6:42
All right, we now have a controlled input,
6:49
which means that we manually manage
the value state of the component.
6:52
In the next video, we'll write
the code that will add a new player to
6:57
the scoreboard when the form is submitted.
7:01
You need to sign up for Treehouse in order to download course files.
Sign up