In React, your UI changes from one state to another.

And state is local to a component, meaning a component can maintain its own state,

unlike props, which are read-only.

So to make our counter interactive,

we need to be able to trigger changes to the data in state.

Now that the score is in our state, we can finally change a player's score.

The score changes when the user clicks the plus or minus button.

So first, we'll create the function or

event handler that updates our state using React's built-in set state method.

Then, we'll give our buttons an onClick event that calls the event handler when

clicked.

Whenever the score state gets updated, React will re-render our component and

the change will be visible in our UI.

In class components,

a common pattern is to create event handlers as a method on the class.

So first, let's create a new method on our component called incrementScore.

This method name has no special meaning in React, it's just a name I came up with.

So to test that our method works, let's log a message to

the console that says, Hi, from inside incrementScore.

Now we'll need to instruct React to listen for the click event on a button.

For this, we'll use React's built-in onClick event.

React events are similar to JavaScript events except that they are written inline

and they named using CamelCase.

In the increment button, we'll specific the event we're listening for, onClick.

And this event is specific to React, so you must name it onClick.

React has other built-in events, like onChange and onSubmit,

which you'll learn about in a later course.

You pass React events, a JSX expression, using curly braces and

the event handler that will get called when the specified event happens.

So let's pass the incrementScore method to the button's

onClick event with this.incrementScore.

And notice how I'm not using parentheses to call incrementScore like we usually

call functions or methods in JavaScript.

We're only passing a reference to the method.

Adding parentheses will call incrementScore and make it run right when

the component mounts, or gets displayed on the page, which we don't want.

We want React to call incrementScore only when the onClick event is fired.

Let's save our file in over in the browser.

I'll refresh, click the + button and in the console,

we see the message, Hi, from inside incrementScore!.

Good, our button is now wired up to the event handler.

So in the next video, we'll update the score state inside our method.