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.
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