Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Handling Events

2:56 with Guil Hernandez

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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up