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
In this video, we'll create a stateful component by first defining an initial state inside the Counter class.
In this video, we're going to create
a stateful component by first defining
0:00
an initial state inside the counter class.
0:04
You'll learn that in React
state changes over time,
0:07
usually in response to users action.
0:11
So what part of the counter will
change when users interact with it?
0:13
The score will increase or decrease
depending on which button they click.
0:18
Score is our state.
0:22
So now let's go into our Counter
component and start creating state.
0:24
Since state is an object, you create and
0:28
initialize state within a class
inside the constructor method.
0:31
So first, I'll set up a constructor.
0:35
Again, if you're not familiar with classes
and constructor methods, be sure to review
0:38
the Tree House videos posted in
the teacher's notes with this video.
0:42
Inside the constructor, I'll call super in
0:46
order to call the constructor of
the component class that we're extending.
0:49
And this needs to be done before
we can use the this keyword
0:55
within the constructor.
0:58
Then to initialize our component state,
1:00
write this.state and
set it equal to an object.
1:03
You must name this object state
otherwise this will not work.
1:09
Since state is data that changes over
time, we first need to set an initial
1:14
state or the state of
the component when it first bounce.
1:19
The state in our counter is going to
be the score we want to display for
1:23
each player.
1:28
I'll call the state score and
set it to 0 by default.
1:29
Now that we've initialized state,
over end React dev tools,
1:33
select a counter component
inside a player component.
1:37
And you should see a new property
called State up here in the right pane.
1:41
We see the course state and
it's value is 0.
1:45
Next, let's remove the score
prop being passed to
1:49
the counter and player components.
1:54
Because Counter is now
maintaining its own score state,
1:58
it doesn't need the score information
from its parent player component.
2:01
You access state in a similar
way to how you access props.
2:06
In the Counter components render method,
2:11
replace this.props.score
with this.state.score.
2:14
You can think of the render
method in a class component
2:18
as being a function of not just props,
but props and state.
2:22
In other words,
if either props or state changes,
2:26
React executes the render method to
update what gets displayed to the user.
2:30
Now once we refresh our app,
2:36
we see that all the players scores
are set to the initial state of 0.
2:38
We can even change the score
state of a counter component
2:43
instance in React Dev Tools and
see the score change on the page.
2:48
Great, so you've just built your
first stateful react component.
2:53
Before we move on,
2:57
I want to teach you a second way you can
initialize state inside a React component.
2:59
A shortcut,
3:05
you'll often see state initialized
inside a class constructor like this.
3:06
But you can also initialize state
directly inside the class definition,
3:11
using a class property.
3:16
You omit the constructor method and
super all together, and
3:18
reference the state property directly.
3:22
You don't need to write it as this.state,
just state, and
3:26
set it equal to the object.
3:30
This class properties syntax is a feature
of JavaScript that's currently not
3:35
supported in all browsers.
3:39
Since we're using the Babel
transpiler in our app,
3:40
we don't have to worry
about browser's support.
3:44
Babel will transpile our code and add
a constructor for us behind the scenes.
3:47
The way you initialize state is up to you.
3:53
I prefer the class property syntax because
it allows for a cleaner class component
3:55
and I don't have to remember to
setup a constructor and call super.
4:00
So that's what I'm gonna
be using moving forward.
4:03
All right,
we've moved our score into a state object
4:06
instead of getting the score from props.
4:10
But so far,
it doesn't seem to have a benefit.
4:12
Up next, you'll learn how to modify
state from inside a component,
4:15
something you're not
able to do with props.
4:18
You need to sign up for Treehouse in order to download course files.
Sign up