Handling Events

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