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
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
In React, two or
more components can share the same state.
0:00
For example, the App component passes
the player state down to the header and
0:04
player component through props.
0:08
Our application currently has two
stateful components, App and Counter.
0:15
But this is not a great overall
structure for our application.
0:21
In the React basics course,
0:26
you learned how to create a simple stateful
component like the Counter component.
0:27
The state of the Counter
is the player score,
0:33
which is currently local to the component.
0:35
This state isn't available to other
components in the app, which makes it
0:38
difficult to access and use player scores
from other parts of our application.
0:42
In time, we'll need to access the state
to determine the highest score and
0:49
the total score count that will
be displayed in the header.
0:53
When two or more components
need access to the same state,
0:57
we'll move the state
into their common parent.
1:01
The score state is gonna be managed as
high up in the application as possible.
1:06
So we'll lift the state of the Counter
component up to where the player data
1:11
lives in the App component.
1:15
We'll start from the bottom up.
1:18
Instead of keeping
the score as a local state,
1:20
we'll let it be a prop
passed to the counter.
1:23
All right, so the first thing we're
gonna do is delete the useState hook.
1:28
The Counter function will now
take props as a parameter.
1:34
Let's write that in.
1:37
The next thing I'm gonna do is remove
the buttons onClick events for now.
1:39
In this video, we're just focusing on
moving state to our App component, and
1:43
communicating the data
downwards through props.
1:48
I'm also going to comment out both
of these event handlers for now.
1:56
Then I'm gonna replace
score with props.score.
2:00
So we essentially converted the Counter
component back to a stateless
2:06
component that just takes in props.
2:10
Now in the Player component,
2:15
we'll pass the score to the Counter
with a prop named score.
2:16
Then in the Apps return statement,
pass the score to the player.
2:32
Also with a prop named score,
to keep the prop name consistent.
2:36
Now let's initialize the score state
here in the application level.
2:47
I'll add a score property to each player
object and set it to 0, by default.
2:51
Now let's save our changes and
open it up in the browser.
3:05
If we run our code, we should see that
it displays our initial player state,
3:08
much like it always has.
3:13
However, our data flow is different.
3:15
Our only stateful component now is App.
3:17
Our Counter component is now simpler and
stateless.
3:20
Pressing the counter buttons
no longer modifies the score.
3:25
This is to be expected right now,
and we'll fix that next.
3:29
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