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.
Update
React Developer Tools now has two tabs, labeled "Components" and "Profiler".
In order to view props as Guil does in this video, you will want to make some changes to the settings for the "Components" tab.
- Open DevTools
- Click on the "Components" tab
- Click on the "View settings" icon
- Click on the "Components" tab
- Unselect the
type equals host (e.g. <div>)filter option that is selected by default
Special thanks to Chris DiPiero for first pointing out this solution.
Resources
[MUSIC]
0:00
At its simplest, React is a library for
creating and updating HTML elements.
0:04
Our application so far is not that useful,
it consists of a static user interface.
0:10
How would we customize the scoreboard,
like add new players and modify scores?
0:15
In React, we use properties, or props,
0:20
to customize our components and
pass dynamic information into them.
0:22
HTML elements accept attributes
that give them further meaning and
0:27
additional behavior.
0:32
Attributes provide extra bits
of information to the browser
0:33
like an element's ID, class name, or
an image's alt text, for example.
0:37
Every React component and
0:41
element can receive a list of
attributes just like HTML elements.
0:42
In React, this list is called properties,
or props.
0:47
Props are a core concept in React, because
it's how we get data into a component.
0:50
Most of the components in your UI
will be configured with props.
0:56
For example, you'll add functionality to
a component, have it behave a certain way,
0:59
and display its contents with props.
1:04
There are two main steps to
using props in a component.
1:07
First, you write props in a component's
JSX tag, using an attribute syntax.
1:10
Then the component needs to be able
to take in that information and
1:16
use it in some way.
1:20
If you remember earlier, when we viewed
the object representation of a DOM node
1:21
in a console,
it had a built-in property named props.
1:26
And its value is an object containing the
attributes passed to it and its children.
1:29
Every React element and
1:35
component has a props object containing
the list of props given to it.
1:36
We can inspect the props of a element and
a component in React DevTools.
1:41
So if you open up React DevTools and
select the scoreboard container div,
1:45
over in the right pane
you'll see the text Props.
1:51
The children prop shows that it's
an array holding two objects.
1:55
And the className prop is the class
given to the div, scoreboard.
2:01
Inspect the Header component, and
2:07
in the right pane you'll see
that Props is an Empty object.
2:09
And that's right, because our Header
component currently has no props.
2:12
Let's start by displaying the content
of our Header component dynamically
2:17
using props.
2:21
In the header, we need to display
two pieces of content, the title and
2:22
the total player count.
2:26
You pass props to a component
via the component's JSX tag
2:29
at the place where it's used.
2:33
The Header tag is used
in the App component, so
2:35
let's first add an attribute named title,
and
2:39
set it to the string "Scoreboard".
2:43
You can give a prop any name you want,
title is just a name that I made up.
2:47
But this could be named heading,
banner, Title McTitleface, anything.
2:51
Next let's add a new
prop named totalPlayers.
2:56
And it's good practice to use camel
case for prop names consisting of two or
3:01
more words to make them more readable.
3:05
Now, the value for
totalPlayers should be a number.
3:07
Anytime you pass a prop a value other than
a string, like a number or a variable,
3:11
you should place it
between curly braces so
3:16
that is gets evaluated
as a JSX expression.
3:18
I'll pass totalPlayers a value 1, but
you can pass it any number you'd like.
3:21
As you can see,
3:26
props look like custom HTML attributes
that provide information to the tag.
3:27
If you open React DevTools and select the
Header component, you should see the title
3:33
and totalPlayers props we passed to
the Header tag here under Props.
3:39
So these two props are now available
to be used in the Header component.
3:44
Next, we'll update our Header
function to use these props.
3:49
When you define a component
using a function,
3:54
the function gets one
default argument from React,
3:57
a props object containing a list
of props given to the component.
4:01
So let's enable the use of
props in our Header component
4:06
by giving our function
a parameter called props.
4:09
You can name this parameter
anything you want, but
4:13
props is the name most commonly used.
4:15
So I recommend naming it props as well.
4:17
If I log props to the console
4:21
You'll see that props is
an object with a key of title,
4:26
which has the value "Scoreboard" and a key
of totalPlayers which has the value 1.
4:30
So now we want to place the values
of these props into our
4:37
JSX inside the h1 and span,
replacing the static text.
4:41
We'll need to access the title and
4:46
totalPlayers properties
of the props object.
4:49
And you can do this with .notation.
4:53
Just as you'd access the property of
any object literal in JavaScript, for
4:54
example, props.title and
props.totalPlayers.
4:59
But you can't simply write
props.title between the h1 tags.
5:02
As you can see, our page will
literally display PROPS.TITLE.
5:10
Well, you learned that JSX
accepts JavaScript expressions.
5:15
So we'll instead display
the content using a JSX expression.
5:19
Again, a JSX expression is
surrounded by curly braces.
5:24
So between the h1 tags,
write props.title inside curly braces.
5:28
And let's replace just the number in
the span after Players with curly braces.
5:34
And inside the curly braces,
we'll write props.totalPlayers.
5:42
I'll give app.js a save.
5:47
And over in the browser
we see that it works.
5:49
We see SCOREBOARD and PLAYERS: 1.
5:52
And you can change the value of
the title and totalPlayers props here in
5:56
the Header tag, for example,
My Scoreboard and 11 totalPlayers.
6:01
And we can see that the component
updates the content.
6:06
Since JSX lets us write JavaScript
expressions between curly braces,
6:13
we can do things like math operations,
for example, props.totalPlayers + 1.
6:19
And we get two players.
6:26
We could write literal
values like strings or
6:28
numbers, and concatenate strings,
even call a function.
6:31
For instance, in the Header tag,
I'll pass the totalPlayers prop
6:35
an arrow function that takes a number and
adds 10 to it.
6:40
Now I can call this function
inside the Header component
6:47
with props.totalPlayers,
pass 5 as the argument.
6:53
And as you can see,
it displays the value 15.
6:59
So remember,
the JavaScript you write between the curly
7:03
braces needs to be an expression or
something that returns a value.
7:07
I'll set totalPlayers back to 1 for now.
7:12
In the next step, you'll learn more
tips and best practices for using props.
7:19
You need to sign up for Treehouse in order to download course files.
Sign up