Based on what you know so far about props, you can think of props as what React

components use to talk to each other and share information.

Props pass data from a parent component down to a child component.

For instance, in the app component we're passing data to the header

component via the title and total Players props.

Which are then consumed by header and displayed as content.

We still need to write the props for the player and counter components.

The player component should display a player's name and

the counter component needs to display their score alongside the buttons.

Can you figure out how to do it?

Why don't you give it a try now.

Here's a hint, the player component should get two props.

One for the name and another for the score.

And player passes the counter component, a prop for the score.

Okay, how did you do?

Since player is the parent of counter,

it's going to define the props for both a player's name and score.

So in the app component, I'll pass two props to the player component.

I'll call them name and score.

I'll set name to the string, Guil, and score to the number 50.

Next, I need to allow the Player component to use these props.

I'll pass the player function.

The parameter props and replace the text in the span

with curly braces and props.name.

And that's going to render the text Guil.

Good.

So next, how do we display the score in the counter?

Well the same way we passed props to the header in player components,

just one more level deep and the componentry, let me show you.

I'll give the child counter component a prop of score.

And I'm just naming it score to be consistent with the score

prop passed to the player component.

This prop could also have any name and

it doesn't have to match the prop name at that top level.

I'll pass the score prompt down to the counter with props.score.

So now over in react devtools.

When we select the counter component inside the player component.

We see that counter has a score prop with a value of 50.

So now I'll use the prop inside counter by passing

the counter function, the parameter props and

replacing this static score with curly braces and props.score.

And now we get the score 50.

So, now that we've set up our player component to receive props and pass props

down to the counter component, we have a dynamic and reusable player component.

For example, I can use multiple player tags

inside the app component to add players and scores to the scoreboard.

Over in the browser, once I refresh, we see that we now

have four player components on screen, each with its own properties.

So this is where the concept of independent, self-contained, and

reusable components begins to manifest itself.

Components facilitate what's known as separation of concerns.

That's the idea that each component in your UI should be responsible for

one thing only, and shouldn't contain extra code that handles other things.

In other words each component addresses a specific concern.

For example, counter is just responsible for

displaying a score which you can increase and decrease.

We'll build that feature later.

Player, only displays player info like the name and score counter.

The header doesn't get reused, it only appears once.

However, extracting it to a component that's only responsible for the header

content allows our app component to be easier to read and think about.

It also reduces code complexity and improves maintainability.

Now right now we are just passing our components static values as props.

Normally this information could be coming in dynamically from a database of API

for example.

Or passed down from the main application state,

which you'll learn about in the next stage.