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
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.
Resources
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 that you have the hang of sharing
state between components and updating
0:00
data in the scoreboard app, let's keep it
going by adding players to the scoreboard.
0:05
We'll create a form with a text field for
naming a new player and
0:11
a button that will add
the player on form submit.
0:16
As you'll learn,
form elements in React work differently
0:19
than regular HTML form elements.
0:24
We'll start by creating a new
component named AddPlayerForm.
0:27
Let's create a new file in our
project named AddPlayerForm.js.
0:32
As usual, import React at the top of the
file by writing import React from 'react'.
0:39
Now let's write the AddPlayerForm
component as an arrow function.
0:49
I'll write const, the component name,
AddPlayerForm = () =>.
0:55
In the arrow function,
1:07
I'll write the return statement
with () for our JSX.
1:09
Now, at the bottom of the file,
let's export our
1:15
component by writing export default,
and our component name AddPlayerForm.
1:19
Now, let's create the form element.
1:29
In the return statement,
add opening and closing form tags.
1:32
Inside the form, add an input
with the type attribute set to text and
1:38
a placeholder attribute with
the value "Enter a player's name".
1:46
JSX require self closing
tags on input element,
1:54
otherwise React will throw a syntax error.
1:59
Next, we'll create the submit
button by adding an input
2:03
element with the type attribute set to
submit and have it display the text.
2:08
"Add Player" with the value attribute.
2:15
Now, let's display this form
inside the main App component.
2:23
In App.js, import the AddPlayerForm
2:28
component with import AddPlayerForm
from ./AddPlayerForm.
2:33
Now, let's add the AddPlayerForm
tag beneath the player list.
2:41
Let's save our changes.
2:52
The structure of our form is set.
2:54
In React, form elements work
differently from other elements
2:57
because form elements naturally
keep some internal state.
3:02
Input fields in HTML for example,
are typically considered stateful.
3:07
When you type into a text field,
you're changing its state,
3:13
its value updates based
on the user's input.
3:19
In React, we need to handle
a form's element state explicitly.
3:23
For example,
if I set the text field value to Laura,
3:28
Then try to type inside the field, notice
how I'm not able to change the value.
3:35
This definitely seems strange, and
not what you would expect to happen.
3:41
So why does this happen?
3:46
When a user types into a text field,
3:49
they're changing the state
of the text field.
3:51
I set the value of the input to Laura.
3:55
So if its state were to
change by typing into it,
3:58
It wouldn't mean that the updated UI
state is out of sync with the code,
4:02
which is explicitly set
to the value Laura.
4:07
React doesn't allow this change for
a good reason.
4:11
To manage our input field state,
4:15
we'll need to build what is
called a controlled component.
4:17
A controlled component renders
a form that controls what
4:22
happens in that form on
subsequent user input.
4:26
In other words, it's a form element whose
value is controlled by React with state.
4:30
Creating a controlled component for
an input element usually works like this.
4:36
Create a state for a value of the input,
4:42
then listen for
changes on that input to detect when
4:46
a value is updated from typing into it,
for example.
4:51
And create an event handler that
updates the state to a new value.
4:56
Setting the input value property to
a state ensures that the content
5:03
in the text field is always
in sync with the state.
5:08
Let's implement that.
5:11
First create a component state
in the AddPlayerForm function by
5:13
calling the useState hook.
5:17
When working with hooks, you'll often see
the hook written as just useState and
5:23
the React import statement
written like this.
5:31
We import React and also import
useState from the React package.
5:35
This is called a named import.
5:40
Let's do the same for the App component.
5:44
We'll start off by importing the useState
hook from the React import statement.
5:46
Then we'll delete React
from the React.useState.
5:57
Going back to AddPlayerForm.js,
we'll set our state name to be value,
6:01
and the function to update
the value state to setValue.
6:08
And set the initial value
to an empty string.
6:13
Then we will set the input
value property to value.
6:17
Next, let's provide our input,
React's built-in onChange event.
6:23
The onChange event gets triggered
immediately after each change.
6:30
For example, the onChange event
gets triggered when a user
6:36
types into an input element.
6:40
Let's pass the onChange event,
an event handler to execute.
6:43
We'll start off by writing
an arrow function.
6:47
This arrow function will be passed a DOM
event for the changes in the element.
6:52
React uses a cross-browser
wrapper called SyntheticEvent, so
6:59
that the cross-browser differences
of DOM events won't get in our way.
7:03
You can learn more about the React
SyntheticEvent in the teachers notes.
7:09
Inside the function, we'll update
the valueState with the setValue function.
7:14
The event object provides
a target property which points
7:24
to the underlying input
element in the DOM.
7:28
We can read the value from it and
7:32
use it to update our state
with event.target.value.
7:35
Our event handler is complete.
7:41
Now in the return statement
under the form tag,
7:43
I'll log the valueState to
the console to see what we get.
7:46
Let's save our changes.
7:52
When I type into the field, the onChange
event runs the setValue function
7:54
with every key press to
update the valueState.
7:59
The displayed value gets
updated as the user types.
8:02
In React's dev tools, we can inspect
the new PlayerForm component and
8:07
see that the state updates as we type.
8:13
Now we have a controlled input,
which means that we manually manage
8:16
the valueState of the component.
8:20
If you're seeing the value state being logged
into the console twice, there's a setting
8:26
in React dev tools that hides logs
during the second render in StrictMode.
8:32
StrictMode is a tool for highlighting
potential problems in an application.
8:37
The Create React App tool automatically
adds StrictMode to your React projects.
8:44
In development, StrictMode
renders components twice in order
8:50
to detect any problems with your code and
warn you about them.
8:55
This can be quite useful.
8:59
You can learn more about React StrictMode
in the teacher's notes below.
9:01
In the next video, we'll write
the code that will add a new player to
9:07
the scoreboard when the form is submitted.
9:11
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