Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
To make the Counter component interactive, we need to be able to trigger changes to the data in state. We'll first create an event handler that updates state, using React's built-in setState() method. Then we'll give the buttons an onClick event that calls the event handler when clicked.
In React,
your UI changes from one state to another.
0:00
And state is local to a component, meaning
a component can maintain its own state,
0:03
unlike props, which are read-only.
0:08
So to make our counter interactive,
0:11
we need to be able to trigger
changes to the data in state.
0:13
Now that the score is in our state,
we can finally change a player's score.
0:16
The score changes when the user
clicks the plus or minus button.
0:21
So first, we'll create the function or
0:26
event handler that updates our state
using React's built-in set state method.
0:28
Then, we'll give our buttons an onClick
event that calls the event handler when
0:33
clicked.
0:38
Whenever the score state gets updated,
React will re-render our component and
0:39
the change will be visible in our UI.
0:44
In class components,
0:47
a common pattern is to create event
handlers as a method on the class.
0:48
So first, let's create a new method on
our component called incrementScore.
0:53
This method name has no special meaning in
React, it's just a name I came up with.
1:01
So to test that our method works,
let's log a message to
1:06
the console that says, Hi,
from inside incrementScore.
1:11
Now we'll need to instruct React to
listen for the click event on a button.
1:19
For this,
we'll use React's built-in onClick event.
1:24
React events are similar to JavaScript
events except that they are written inline
1:27
and they named using CamelCase.
1:32
In the increment button, we'll specific
the event we're listening for, onClick.
1:35
And this event is specific to React,
so you must name it onClick.
1:41
React has other built-in events,
like onChange and onSubmit,
1:45
which you'll learn about
in a later course.
1:49
You pass React events, a JSX expression,
using curly braces and
1:51
the event handler that will get called
when the specified event happens.
1:56
So let's pass the incrementScore
method to the button's
2:01
onClick event with this.incrementScore.
2:06
And notice how I'm not using parentheses
to call incrementScore like we usually
2:11
call functions or methods in JavaScript.
2:15
We're only passing
a reference to the method.
2:18
Adding parentheses will call
incrementScore and make it run right when
2:21
the component mounts, or gets displayed
on the page, which we don't want.
2:25
We want React to call incrementScore
only when the onClick event is fired.
2:29
Let's save our file in
over in the browser.
2:36
I'll refresh, click the + button and
in the console,
2:38
we see the message, Hi,
from inside incrementScore!.
2:43
Good, our button is now wired
up to the event handler.
2:47
So in the next video, we'll update
the score state inside our method.
2:51
You need to sign up for Treehouse in order to download course files.
Sign up