This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Adding a Click Handler" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Add a click event to the title that calls a method in the component class. Brian discusses why this approach in React of having all markup and event handling in the component vs spread amongst other modules is good for debugging.

Get Unlimited Access Now

Transcript from the "Adding a Click Handler" Lesson

>> Brian Holt: I wanted to show a little bit why you might wanna do this. Let's say we wanted to add, maybe someone clicks on this Adopt Me that it does something, right? So what we could do now is we could put in handleTitleClick, or something like that, some function name.

[00:00:23] And we'll just do alert you clicked the title.
>> Brian Holt: Okay, so now I have a function that I wanna run anytime someone clicks on this h1.
>> Brian Holt: So I'm gonna come down to this h1 and I'm gonna say onClick.
>> Brian Holt: So whenever someone clicks, I want it to run this.handleTitleClick.

>> Brian Holt: So I made this function here, handleTitleClick, and whenever someone clicks on this h1 over here, it's going to run this.handleTitleClick.
>> Brian Holt: Just talk about this for just a moment. It's one of the most confusing parts about JavaScript and it ends up being extremely important in React. So we will be talking a lot about JavaScript context today.

[00:01:18] In this case, this refers to whatever instance of app that we have. We're only gonna ever have one instance of app, so it's gonna be the application itself. But it's key to keep in mind that if I have a this for pet, it's gonna be that particular pet, right?

[00:01:35] It's not gonna be all pets, it's just gonna be that one pet. So now if we save this and go over and refresh, and we click on Adopt Me, it'll say that you clicked the title.
>> Brian Holt: So this is how you add interactivity to your application. I like this because I have handleTitleClick.

[00:01:57] And obviously, you can do something way more complicated here. You can request from APIs. You can do animations. Anything you can imagine, you can do that in here. But I get to see the h1 right here and I get to see what that h1 does within the same view, within the same file.

[00:02:14] This is actually another part of React that I really like is every component is its own world, right? Everything that pertains to that component lives in the same file. And I love that because it makes debugging things really, really easy. I compare that with my AngularJS days, which, to be fair, I wrote poor AngularJS.

[00:02:33] But I also say that AngularJS let me write poor AngularJS as well. Now it's also possible to write bad React as well. But in any case, if you have a, maybe I click on this and it doesn't do exactly what I was expecting. If this was AngularJS, what would be the problem?

[00:02:52] It could be with the service. It could be with the directive. It could be with the controller. It could be something inside of the scope. It could be with some library that you brought in on the directive. It could be any number of things. By knowing what the problem is, you're really no closer to solving what's wrong with it, right?

[00:03:08] You have to look in nine places to figure out what's wrong. And that was a big problem with me with my Angular application that I wrote is that over time, it got really difficult to debug because there's a lot of magic with AngularJS. And I think they've solved a lot of these problems with Angular cuz there are really smart engineers over there.

[00:03:26] But this is what I really, really enjoy about React, that If I click on this and something doesn't go right, I know exactly where to start, right? It has to start with that component because everything has to start there. So we'd come over here and now we'd see it's like, okay, I did something.

[00:03:41] I had called alert instead of console.log or whatever my problem is, right? But I know instantly where to start. By knowing what the problem is, I know where to start. Now don't get me wrong. You could have to drill down several more components. It could be some library that I imported or something like that, but you know where to start the debugging process, and I think that's really important.