In this video, we're going to create a stateful component by first defining

an initial state inside the counter class.

You'll learn that in React state changes over time,

usually in response to users action.

So what part of the counter will change when users interact with it?

The score will increase or decrease depending on which button they click.

Score is our state.

So now let's go into our Counter component and start creating state.

Since state is an object, you create and

initialize state within a class inside the constructor method.

So first, I'll set up a constructor.

Again, if you're not familiar with classes and constructor methods, be sure to review

the Tree House videos posted in the teacher's notes with this video.

Inside the constructor, I'll call super in

order to call the constructor of the component class that we're extending.

And this needs to be done before we can use the this keyword

within the constructor.

Then to initialize our component state,

write this.state and set it equal to an object.

You must name this object state otherwise this will not work.

Since state is data that changes over time, we first need to set an initial

state or the state of the component when it first bounce.

The state in our counter is going to be the score we want to display for

each player.

I'll call the state score and set it to 0 by default.

Now that we've initialized state, over end React dev tools,

select a counter component inside a player component.

And you should see a new property called State up here in the right pane.

We see the course state and it's value is 0.

Next, let's remove the score prop being passed to

the counter and player components.

Because Counter is now maintaining its own score state,

it doesn't need the score information from its parent player component.

You access state in a similar way to how you access props.

In the Counter components render method,

replace this.props.score with this.state.score.

You can think of the render method in a class component

as being a function of not just props, but props and state.

In other words, if either props or state changes,

React executes the render method to update what gets displayed to the user.

Now once we refresh our app,

we see that all the players scores are set to the initial state of 0.

We can even change the score state of a counter component

instance in React Dev Tools and see the score change on the page.

Great, so you've just built your first stateful react component.

Before we move on,

I want to teach you a second way you can initialize state inside a React component.

A shortcut,

you'll often see state initialized inside a class constructor like this.

But you can also initialize state directly inside the class definition,

using a class property.

You omit the constructor method and super all together, and

reference the state property directly.

You don't need to write it as this.state, just state, and

set it equal to the object.

This class properties syntax is a feature of JavaScript that's currently not

supported in all browsers.

Since we're using the Babel transpiler in our app,

we don't have to worry about browser's support.

Babel will transpile our code and add a constructor for us behind the scenes.

The way you initialize state is up to you.

I prefer the class property syntax because it allows for a cleaner class component

and I don't have to remember to setup a constructor and call super.

So that's what I'm gonna be using moving forward.

All right, we've moved our score into a state object

instead of getting the score from props.

But so far, it doesn't seem to have a benefit.

Up next, you'll learn how to modify state from inside a component,

something you're not able to do with props.