Our increment button is now wired up to the incrementScore event handler.

So next, let's update the score state inside the incrementScore method.

Each time a user clicks the plus button, the counter score will increase by one.

It's important to remember that state is never modified directly.

In other words, we're not able to increment the score state by one,

like this.

The only way React allows you to update a component state is by using its

built-in set state method.

So inside incrementScore, let's call this.setState.

You see, React needs to be told when state changes.

So this.setstate lets React know that state has changed, and that it should

re-render and make changes to the component, based on the change in state.

You pass setState, an object that contains the part of the state you wanna update,

and the value you want to update it to.

In our case, we want to update the score state.

When incrementScore is called,

we want to set the score state to one more than its current value.

So for now, I'll set it to the current score plus one,

with this.state.score + 1.

So to recap, setState is going to do two things.

It will update the value of the score state, and

it will tell React that this component needs to be

re-rendered to make sure that everything is up to date in the UI.

Our method is all set to update the state, but

if we try to increment a player's score, nothing happens.

And we get an error in the console that says,

Uncaught TypeError: Cannot read property 'setState' of undefined.

It looks like we've lost our binding to the component, so

we're not able to reference it with this from within the incrementScore method.

It's common to experience this issue when handling events in React.

We'll look at why this happened and how to fix it in the next video