In React, two or more components can share the same state.

For example, the app component passes the players state

down to the header and player components through props.

Our application currently has two stateful components, app and counter.

But this is not a great overall structure for our application.

In the React basics course,

I just wanted to teach you how to create a simple stateful component, a counter.

The state of the counter is the player's score,

which is currently local to the component.

This state isn't available to other components in the app, which makes it

difficult to access and use player scores from other parts of our application.

In time, we'll need to access this state to determine the highest score and

the total score count that will be displayed in the header for example.

So when two or more component need access to the same state,

we move the state into their common parent.

This is calles lifting state up.

The score state is gonna be managed as high up in the application as possible.

So we'll lift the state of the counter component up to where the player data

lives in the app component.

This time we'll start from the bottom up.

Instead of keeping the score as local state,

we'll go back to letting it be a prop passed to the counter.

So in the counter class, let's delete the state object.

Let's also remove the button on click events for now.

In this video we're just focusing on moving state to our app component and

communicating the data downwards through props.

We'll handle the changing of data in the next video.

Let's also replace this.state.score with this.props.score.

So we've essentially converted the counter back to a stateless component

that just takes in props.

Now in the player component, we'll pass the score to the counter,

with a prop name score and

we'll set the value to props.score.

Then in the app components render method, let's pass the score to a player,

also with the prop name score, to keep the prop names consistent, and

as the value, we'll write player.score.

Finally, let's initialize a score state here at the application level.

Add a score property to each player object and set it to zero by default.

If we run our code, we should see that it displays our initial player state,

much like it always has.

However, our dataflow is different.

Our only stateful component is now app.

Our counter component is now simpler and stateless.

Now you could leave it as a class, but

if you'd like you can convert the counter back to a functional component since

it's only going to receive input through props and render UI.

I'll show you how to quickly convert it.

First, I'll change the import statement to just import react, from react, then

replace the class definition with an error function that takes a props parameter.

I'll remove the render method and keep the return statement only.

And I'll comment out both event handlers for now.

We'll refactor these into one function in the next video.

Finally, I'll change this.props.score to just props.score.

Over in the scoreboard, pressing the counter buttons no longer modifies

the score, but this is to be expected right now, and we'll fix that next.