[MUSIC]

At its simplest, React is a library for creating and updating HTML elements.

Our application so far is not that useful, it consists of a static user interface.

How would we customize the scoreboard, like add new players and modify scores?

In React, we use properties, or props,

to customize our components and pass dynamic information into them.

HTML elements accept attributes that give them further meaning and

additional behavior.

Attributes provide extra bits of information to the browser

like an element's ID, class name, or an image's alt text, for example.

Every React component and

element can receive a list of attributes just like HTML elements.

In React, this list is called properties, or props.

Props are a core concept in React, because it's how we 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.

There are two main steps to using props in a component.

First, you write props in a component's JSX tag, using an attribute syntax.

Then the component needs to be able to take in that information and

use it in some way.

If you remember earlier, when we viewed the object representation of a DOM node

in a console, it had a built-in property named props.

And its value is an object containing the attributes passed to it and its children.

Every React element and

component has a props object containing the list of props given to it.

We can inspect the props of a element and a component in React DevTools.

So if you open up React DevTools and select the scoreboard container div,

over in the right pane you'll see the text Props.

The children prop shows that it's an array holding two objects.

And the className prop is the class given to the div, scoreboard.

Inspect the Header component, and

in the right pane you'll see that Props is an Empty object.

And that's right, because our Header component currently has no props.

Let's start by displaying the content of our Header component dynamically

using props.

In the header, we need to display two pieces of content, the title and

the total player count.

You pass props to a component via the component's JSX tag

at the place where it's used.

The Header tag is used in the App component, so

let's first add an attribute named title, and

set it to the string "Scoreboard".

You can give a prop any name you want, title is just a name that I made up.

But this could be named heading, banner, Title McTitleface, anything.

Next let's add a new prop named totalPlayers.

And it's good practice to use camel case for prop names consisting of two or

more words to make them more readable.

Now, the value for totalPlayers should be a number.

Anytime you pass a prop a value other than a string, like a number or a variable,

you should place it between curly braces so

that is gets evaluated as a JSX expression.

I'll pass totalPlayers a value 1, but you can pass it any number you'd like.

As you can see,

props look like custom HTML attributes that provide information to the tag.

If you open React DevTools and select the Header component, you should see the title

and totalPlayers props we passed to the Header tag here under Props.

So these two props are now available to be used in the Header component.

Next, we'll update our Header function to use these props.

When you define a component using a function,

the function gets one default argument from React,

a props object containing a list of props given to the component.

So let's enable the use of props in our Header component

by giving our function a parameter called props.

You can name this parameter anything you want, but

props is the name most commonly used.

So I recommend naming it props as well.

If I log props to the console

You'll see that props is an object with a key of title,

which has the value "Scoreboard" and a key of totalPlayers which has the value 1.

So now we want to place the values of these props into our

JSX inside the h1 and span, replacing the static text.

We'll need to access the title and

totalPlayers properties of the props object.

And you can do this with .notation.

Just as you'd access the property of any object literal in JavaScript, for

example, props.title and props.totalPlayers.

But you can't simply write props.title between the h1 tags.

As you can see, our page will literally display PROPS.TITLE.

Well, you learned that JSX accepts JavaScript expressions.

So we'll instead display the content using a JSX expression.

Again, a JSX expression is surrounded by curly braces.

So between the h1 tags, write props.title inside curly braces.

And let's replace just the number in the span after Players with curly braces.

And inside the curly braces, we'll write props.totalPlayers.

I'll give app.js a save.

And over in the browser we see that it works.

We see SCOREBOARD and PLAYERS: 1.

And you can change the value of the title and totalPlayers props here in

the Header tag, for example, My Scoreboard and 11 totalPlayers.

And we can see that the component updates the content.

Since JSX lets us write JavaScript expressions between curly braces,

we can do things like math operations, for example, props.totalPlayers + 1.

And we get two players.

We could write literal values like strings or

numbers, and concatenate strings, even call a function.

For instance, in the Header tag, I'll pass the totalPlayers prop

an arrow function that takes a number and adds 10 to it.

Now I can call this function inside the Header component

with props.totalPlayers, pass 5 as the argument.

And as you can see, it displays the value 15.

So remember, the JavaScript you write between the curly

braces needs to be an expression or something that returns a value.

I'll set totalPlayers back to 1 for now.

In the next step, you'll learn more tips and best practices for using props.