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
Every React component and element can receive a list of attributes called properties (or props). Props are a core concept in React because it's how you get data into a component. Most of the components in your UI will be configured with props. For example, you'll add functionality to a component, have it behave a certain way, and display its contents with props.
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
Let's start by displaying the content
of our Header component dynamically,
0:00
using props.
0:05
Within the Header component,
we have two pieces of content to display,
0:06
the title and the total item count.
0:11
We can pass props to a component
by adding them as attributes to
0:13
the component's JSX tag
wherever it's used.
0:18
In our app component where the Header
tag is called, let's begin by adding
0:21
an attribute named title, and
set its value to the string Grocery List.
0:27
When assigning props, you have the
flexibility to choose any name you prefer.
0:32
In this case,
I've used the name title, but
0:37
you could choose names like heading or
banner instead.
0:40
It's entirely up to you.
0:44
Next, let's add a new
prop named ItemTotal.
0:46
To improve readability,
it's good practice to use camel case for
0:51
prop names that consist
the multiple words.
0:55
For the itemTotal prop,
we'll assign a numeric value.
0:58
Whenever you pass a prop
a value that's not a string,
1:03
such as a number or a variable,
enclose it in curly braces.
1:07
This ensures that it's
evaluated as a JSX expression.
1:11
I'll pass it the value 1, but
feel free to assign any number you like.
1:17
As you can see, props resemble
custom HTML attributes that provide
1:22
information to the corresponding tag.
1:26
When a component has multiple props, it's
common to write them on separate lines and
1:30
indent them for
better readability, like so.
1:35
If you open React DevTools and
select the Header component, you should be
1:41
able to see the title and itemTotal
props that we passed to the Header tag.
1:46
These two props are now available
to be used in the Header component.
1:51
Next, let's update our Header
component function to use these props.
1:56
When you define a component
using a function,
2:01
the function gets one
default parameter from React,
2:04
a props object containing the list
of props given to the component.
2:08
So let's enable the use of props in
our Header component by giving our
2:12
function a parameter called props.
2:17
Although you can choose any name for
this parameter,
2:19
props is the name most commonly used,
so I recommend naming it props as well.
2:23
To verify that the props
are being received correctly,
2:29
let's log the props object to the console.
2:32
After saving the changes,
if you check the console,
2:38
you'll see that the props
object contains two keys,
2:42
itemTotal with the value of 1 and
title with the value Grocery List.
2:46
You might also come across this warning,
this is because Vite doesn't
2:51
expect all our React code to be just
in one file, which is our case.
2:56
However, this is something we'll
address in the upcoming course,
3:01
when you learn how to organize your
components into separate files.
3:04
If you do encounter this warning,
don't worry.
3:08
A simple page refresh
will make it disappear.
3:11
Additionally, you might notice that our
props object gets logged to the console
3:15
twice.
3:20
This behavior is a result of
enabling strict mode in our app.
3:20
As a reminder from the previous stage,
one of the ways strict
3:24
mode detects potential bugs in our code
is by running our components twice.
3:28
This is why props was logged
to the console twice.
3:33
Now, let's incorporate the values of these
3:37
props into our JSX
replacing the static text.
3:40
To access properties of the props object,
we can use dot notation,
3:43
similar to accessing properties
of any JavaScript object.
3:47
For example, you can use props.title and
props.itemTotal.
3:52
However, if we simply write
props.title between the h1 tags,
3:58
the page will display
the literal string props.title.
4:03
To display the actual content dynamically,
we need to use a JSX expression.
4:08
Remember, JSX expressions
are surrounded by curly braces.
4:14
So between the h1 tags,
write {props.title} inside curly braces.
4:19
Similarly, replace the number in the span
tag after items with curly braces and
4:25
inside them, write {props.itemTotal}.
4:32
Let's save our changes, and
in the browser, we see that it works.
4:36
It displays GROCERY LIST as the title and
1 as the item count.
4:40
Since our props parameter is an object,
we can destructure it.
4:46
Essentially, this means that rather
than consistently writing props.title or
4:50
props.itemTotal, we can simplify
it to just title and itemTotal.
4:56
To do this,
we'll replace props with curly braces and
5:00
our prop names, title and item total.
5:05
Now, we can delete props.,
from our component.
5:07
In the browser, you'll notice
that everything looks the same.
5:12
I wanted to quickly show you this because
you will encounter props written like this
5:16
in React's documentation.
5:21
However, I'll keep using props.title and
props.itemTotal for now, just
5:22
to make it more clear that we're using
props as we're getting started with React.
5:28
It's important to know that props
in React are read-only values.
5:33
If we attempt to modify the title
prop within the Header component, for
5:38
example, by setting it to My Grocery List,
the app will fail to appear on the screen.
5:43
If we check the console,
we see a list of errors.
5:50
The error at the top says, cannot assign
to read only property title of object.
5:53
Instead, if we wish to change the value
of the title and itemTotal props,
6:00
we need to modify them directly
within the Header tag.
6:05
For example, we can set the title
prop to My Grocery List and
6:09
the itemTotal prop to 25.
6:15
By making these changes, we see the Header
component dynamically updates its content.
6:17
Since JSX allows us to write JavaScript
expressions within curly braces,
6:24
we can do things like math operations,
for example,
6:29
props.itemTotal + 1, and we get 26 items.
6:33
We can also include literal values
such as strings or numbers,
6:37
and add strings together.
6:41
Even call functions within
the JSX expression.
6:43
For instance, within the Header tag,
we can pass the itemTotal prop
6:47
an arrow function that takes a number
as an argument and adds 10 to it.
6:52
In the Header component,
we can call this function using
6:57
props.itemTotal and pass the argument 5.
7:02
I'll save, and in the browser,
we can see it display the value 15.
7:06
Remember, the JavaScript code placed
within the curly braces in JSX
7:10
should always be an expression or
something that returns a value.
7:15
For now, I'll revert the item
total value back to 1.
7:20
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