Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Basics

Well done!

You have completed React Basics!

Sign up for Treehouse Back to Library

Handling Events

3:08 with Laura Coronel

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 then we'll give the buttons an onClick event that calls the event handler when clicked.

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 0:04
    maintain its own state, unlike props, which are read-only. 0:09
    Now let's make our Counter component interactive. 0:13
    We need to be able to trigger changes to the data in state. 0:17
    Now that the quantity is in our state, we can finally change an item's quantity. 0:21
    We want the quantity to change when the user clicks the plus or minus buttons. 0:27
    So here's the plan. 0:33
    We're going to create an event handler function that updates our state by using 0:34
    the state setter function setQuantity, given to us by the useState hook. 0:39
    Then we'll link this function to the buttons using an onClick event. 0:44
    So when someone clicks the button, the event handler springs into action. 0:50
    Every time we update the quantity state, React takes notice and 0:55
    refreshes our component so the change shows up in the UI. 0:59
    A common pattern is to create event handlers in the component. 1:03
    So let's start by creating an arrow function called 1:08
    incrementQuantity within our Counter component. 1:11
    This name doesn't have any special meaning in React, I just came up with it. 1:15
    Now, to see if our function works, let's log a message to 1:20
    the console that goes like, Hi, from inside incrementQuantity. 1:25
    All right, time to tell React to run this event handler whenever the increment 1:30
    button is clicked. 1:35
    For this, we'll use React's built-in onClick event. 1:37
    React events are similar to JavaScript events, 1:42
    except that they're written inline and named using camel case. 1:45
    For the increment button, we'll use the onClick event. 1:50
    This event is specific to React, so you must name it onClick. 1:54
    There are other built-in events too, like onChange and onSubmit, 1:59
    you will learn about those in a later course. 2:04
    When it comes to React events, you pass them a bit of JSX code, 2:06
    using curly braces, and the function you want to run when the event happens. 2:11
    Let's pass the incrementQuantity function to the button's onClick event. 2:17
    Take a look. 2:22
    Notice how I'm not using parentheses to call incrementQuantity, 2:23
    like we would usually do with functions in JavaScript. 2:27
    We're only passing a reference to the method. 2:31
    Using parentheses would call it right away, which isn't what we want. 2:35
    We want React to call incrementQuantity only when the onClick event is fired. 2:40
    Let's save our file and head over to the browser. 2:45
    Refresh the page and click the plus button. 2:49
    In the console, you should see our friendly message, Hi, 2:53
    from inside incrementQuantity. 2:56
    Good, our button is wired up to the event handler. 2:59
    And in the next video, we'll update the quantity state inside our event handler. 3:02

    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