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 set up the Player component to receive props and pass props down to the Counter component. This will make the Player component dynamic and reusable.
Resources
Based on what you know so far about props,
you can think of props as what React
0:00
components use to talk to each other and
share information.
0:04
Props pass data from a parent
component down to a child component.
0:07
For instance, in the app component
we're passing data to the header
0:12
component via the title and
total Players props.
0:17
Which are then consumed by header and
displayed as content.
0:21
We still need to write the props for
the player and counter components.
0:27
The player component should
display a player's name and
0:31
the counter component needs to display
their score alongside the buttons.
0:35
Can you figure out how to do it?
0:40
Why don't you give it a try now.
0:41
Here's a hint,
the player component should get two props.
0:43
One for the name and
another for the score.
0:48
And player passes the counter component,
a prop for the score.
0:51
Okay, how did you do?
1:01
Since player is the parent of counter,
1:03
it's going to define the props for
both a player's name and score.
1:06
So in the app component, I'll pass
two props to the player component.
1:13
I'll call them name and score.
1:18
I'll set name to the string,
Guil, and score to the number 50.
1:21
Next, I need to allow the Player
component to use these props.
1:29
I'll pass the player function.
1:35
The parameter props and
replace the text in the span
1:36
with curly braces and props.name.
1:43
And that's going to render the text Guil.
1:48
Good.
1:51
So next, how do we display
the score in the counter?
1:53
Well the same way we passed props
to the header in player components,
1:57
just one more level deep and
the componentry, let me show you.
2:02
I'll give the child counter
component a prop of score.
2:06
And I'm just naming it score to
be consistent with the score
2:12
prop passed to the player component.
2:15
This prop could also have any name and
2:17
it doesn't have to match
the prop name at that top level.
2:19
I'll pass the score prompt down
to the counter with props.score.
2:22
So now over in react devtools.
2:30
When we select the counter component
inside the player component.
2:35
We see that counter has a score
prop with a value of 50.
2:41
So now I'll use the prop
inside counter by passing
2:45
the counter function,
the parameter props and
2:49
replacing this static score with
curly braces and props.score.
2:54
And now we get the score 50.
3:03
So, now that we've set up our player
component to receive props and pass props
3:06
down to the counter component, we have
a dynamic and reusable player component.
3:11
For example,
I can use multiple player tags
3:16
inside the app component to add
players and scores to the scoreboard.
3:20
Over in the browser,
once I refresh, we see that we now
3:26
have four player components on screen,
each with its own properties.
3:29
So this is where the concept of
independent, self-contained, and
3:34
reusable components begins
to manifest itself.
3:38
Components facilitate what's
known as separation of concerns.
3:41
That's the idea that each component
in your UI should be responsible for
3:46
one thing only, and shouldn't contain
extra code that handles other things.
3:51
In other words each component
addresses a specific concern.
3:56
For example,
counter is just responsible for
3:59
displaying a score which you
can increase and decrease.
4:02
We'll build that feature later.
4:06
Player, only displays player info
like the name and score counter.
4:07
The header doesn't get reused,
it only appears once.
4:13
However, extracting it to a component
that's only responsible for the header
4:16
content allows our app component to
be easier to read and think about.
4:20
It also reduces code complexity and
improves maintainability.
4:25
Now right now we are just passing our
components static values as props.
4:30
Normally this information could be coming
in dynamically from a database of API
4:35
for example.
4:39
Or passed down from
the main application state,
4:40
which you'll learn about
in the next stage.
4:43
You need to sign up for Treehouse in order to download course files.
Sign up