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
When two or more components need access to the same state, we move the state into their common parent. This is called "lifting state up".
Resources
In React, two or
more components can share the same state.
0:00
For example,
the app component passes the players state
0:04
down to the header and
player components through props.
0:08
Our application currently has two
stateful components, app and counter.
0:13
But this is not a great overall
structure for our application.
0:19
In the React basics course,
0:23
I just wanted to teach you how to create
a simple stateful component, a counter.
0:24
The state of the counter
is the player's score,
0:29
which is currently local to the component.
0:32
This state isn't available to other
components in the app, which makes it
0:35
difficult to access and use player scores
from other parts of our application.
0:39
In time, we'll need to access this state
to determine the highest score and
0:43
the total score count that will be
displayed in the header for example.
0:47
So when two or more component
need access to the same state,
0:51
we move the state into
their common parent.
0:55
This is calles lifting state up.
0:58
The score state is gonna be managed as
high up in the application as possible.
1:00
So we'll lift the state of the counter
component up to where the player data
1:04
lives in the app component.
1:09
This time we'll start from the bottom up.
1:11
Instead of keeping
the score as local state,
1:14
we'll go back to letting it be
a prop passed to the counter.
1:16
So in the counter class,
let's delete the state object.
1:20
Let's also remove the button
on click events for now.
1:24
In this video we're just focusing on
moving state to our app component and
1:28
communicating the data
downwards through props.
1:32
We'll handle the changing
of data in the next video.
1:35
Let's also replace this.state.score
with this.props.score.
1:38
So we've essentially converted
the counter back to a stateless component
1:45
that just takes in props.
1:49
Now in the player component,
we'll pass the score to the counter,
1:51
with a prop name score and
1:56
we'll set the value to props.score.
1:59
Then in the app components render method,
let's pass the score to a player,
2:04
also with the prop name score,
to keep the prop names consistent, and
2:10
as the value, we'll write player.score.
2:14
Finally, let's initialize a score
state here at the application level.
2:18
Add a score property to each player
object and set it to zero by default.
2:23
If we run our code, we should see that
it displays our initial player state,
2:34
much like it always has.
2:39
However, our dataflow is different.
2:40
Our only stateful component is now app.
2:43
Our counter component is now simpler and
stateless.
2:46
Now you could leave it as a class, but
2:49
if you'd like you can convert the counter
back to a functional component since
2:51
it's only going to receive input
through props and render UI.
2:55
I'll show you how to quickly convert it.
2:58
First, I'll change the import statement
to just import react, from react, then
3:00
replace the class definition with an error
function that takes a props parameter.
3:06
I'll remove the render method and
keep the return statement only.
3:16
And I'll comment out both
event handlers for now.
3:23
We'll refactor these into one
function in the next video.
3:26
Finally, I'll change this.props.score
to just props.score.
3:30
Over in the scoreboard, pressing
the counter buttons no longer modifies
3:36
the score, but this is to be expected
right now, and we'll fix that next.
3:40
You need to sign up for Treehouse in order to download course files.
Sign up