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
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video, we'll set up the Item component to receive props and pass props down to the Counter component. This will make the Item component dynamic and reusable.
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
You can think of props as what React
components use to talk to each other and
0:01
share information.
0:05
Props pass data from a parent
component down to a child component.
0:07
In our example, within the App component,
0:12
we pass data to the Header component
through the title and itemTotal props.
0:15
The Header component then uses these
props to display the appropriate content.
0:20
Let's continue with defining props for
the Item and Counter components.
0:27
The Item component should display
the name of an item, while the Counter
0:32
component needs to display
the quantity alongside the buttons.
0:37
Can you figure out how to do it?
0:41
Why not give it a try?
0:43
Here is a helpful hint.
0:45
The Item component requires two props,
one for the name and another for quantity.
0:46
Additionally, the Item
component passes a prop for
0:53
the quantity to the Counter component.
0:56
Pause the video and give it a try.
0:59
How did it go?
1:05
Since the Item component is
the parent of the Counter component,
1:06
it's responsible for defining the props
for both the item's name and quantity.
1:10
In the App component,
let's pass two props to the Item tag,
1:16
named named name and quantity.
1:20
You can set name to any name as a string,
and the value for
1:23
quantity should be a number,
which we'll place between curly braces.
1:27
Next, we need to allow the Item
component to access and use these props.
1:32
Let's modify the Item function to
accept the parameter props and
1:38
replace the existing text in
the span element with props.name.
1:43
Let's save, and in the browser,
we see the text banana for the item name.
1:48
Good, so next, how do we display
the quantity in the Counter component?
1:52
Well, the same way we pass props to
the Header and Item components, but
1:59
this time one level deeper
in the component tree.
2:03
Let me walk you through it.
2:06
We'll provide the Counter component
with a prop name quantity.
2:08
I'm using the name quantity to maintain
consistency with the prop passed to
2:12
the Item component.
2:17
However, you can choose any name for
this prop,
2:18
it doesn't need to match
the prop name at the top level.
2:21
I'll pass the quantity prop down to
the Counter component with props.quantity.
2:24
Now if we select the Counter
component in React DevTools,
2:33
we can see that it has the quantity
prop with a value of 5.
2:37
This prop is now accessible
within the Counter component.
2:41
To use it, we'll modify the Counter
function to accept the parameter props and
2:45
replace the static quantity
value with props.quantity.
2:51
After saving the changes,
2:56
we can see in the browser that the Counter
component displays the quantity of 5.
2:57
By setting up the Item component to
receive props and passing props down to
3:03
the Counter component, we have
a dynamic and reusable Item component.
3:08
For example, within the App component,
we can use multiple
3:12
item tags to add items and
quantities to the grocery list.
3:18
In the browser, we have four
item components on the screen,
3:23
each with its own set of properties.
3:27
This is where the concept of independent,
self-contained, and
3:30
reusable components begin
to manifest itself.
3:33
Components facilitate what's
known as separation of concerns.
3:36
That's the idea that each component
in your UI should be responsible for
3:41
one thing only and shouldn't contain
extra code that handles other things.
3:46
In other words, each component
should address a specific concern.
3:52
For instance, the Counter component
is solely responsible for
3:56
displaying a quantity that can
be incremented or decremented.
4:00
We'll implement this feature later.
4:04
On the other hand,
the Item component is responsible for
4:07
presenting item information,
such as the name and the quantity counter.
4:10
The Header component doesn't get reused,
it only appears once.
4:15
However, extracting it to a component
that's only responsible for the header
4:19
content allows our App component to
be easier to read and think about.
4:25
This approach reduces code complexity and
improves maintainability.
4:29
Currently, we're passing static
values as props to our components.
4:36
However, in real-world scenarios, this
information would typically be dynamically
4:40
sourced from a database or API, or passed
down from the main application state,
4:45
which we'll learn about in the next stage.
4:50
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