This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Handle Events in Class Components" Lesson
[00:00:00]
>> So let's go add like an EventListener now. If you remember when we were doing it with function components, you just put like a little mini function inside of the onclick. We're gonna do it a little bit differently. You could do it that way, but typically you do it a little bit differently with class components.
[00:00:18] So, we want to do like some sort of like extra function called like handleIndexClick. This is gonna take in some sort of event, which is gonna do something, right? And then here on our image, we're gonna say, onclick. And we're gonna put this dot handle index click. Now, it's gonna give me a accessibility error and it absolutely should because what I'm showing you here is objectively not the right way to do this.
[00:00:53] [LAUGH] What you should do is, you should have some sort of button that wraps this that's invisible or an a link or something that actually is clickable by the browser. Otherwise, a screen reader tool wouldn't be able to tap onto this. The crux of the issue here is, you can't tap onto it and hit enter, which makes it inherently inaccessible.
[00:01:14] For simplicity's sake we're just gonna stick with this but I want you to know that that's how you would handle that, okay? So the way that you get it to stop telling you that you're doing horrible things and you're a terrible person is you say Eslint Disable-next-line. And that'll work.
[00:01:38] Yeah. Okay? So we have handleIndexClick here. As a rule of thumb, this is probably more of a Brian whole thing but I think a general React thing. Whenever it's an event handler and class component I just stick handle on the beginning. For me, that just immediately signifies this is an event handler, okay?
[00:02:02] This is gonna take an event from the browser but I wanna demonstrate something to you right now that is a foot gun that comes with class components. If I say console dot log this, we talked a little bit about this earlier, nice, this. What is this here? Now let's refresh and check it out.
[00:02:28] Undefined, that's problematic if I wanna call this.setstate, is it not? Cuz that's exactly what I wanna do here, is I just want to change what's active here. So how do I do that? I'll show you the old way and I'll show you the new way. So don't follow this for a second, I'm just gonna show you the old way really quick.
[00:02:52] You'd have to put a constructor back in here. And if you're not using class properties you still would have to do it this way, And then you would say this.handle index click equals this.handle index click.bind this. If that feels ridiculous it's cuz it looks ridiculous. But now,. Why are you mad at me for this?
[00:03:22]
>> Constructing.
>> Constructing, that's hilarious. Okay, and now if I click this, notice that it's correct again, right? So this will work, obviously, and we did this for a long time. The much easier way is we talked about arrow functions, right? So if you say handle event index click equals, arrow function like this, now, is what is it gonna be?
[00:03:59] That's correct again, because, arrow functions don't have that same sort of problem with creating contexts where it's, it doesn't create a new context at the invocation site, right? It just uses wherever it was before. So in this case, because handle index click has created in the context of this carousel, it just uses that as this.
[00:04:24] Whereas if I call handle index click from outside of it somewhere, it's gonna create a new with this context of wherever it was invoked. Not really something you need to be super concerned with why, it's just this works. Yeah. So this is a class property, right? This works the same way as this, if that makes any sense.
[00:04:49] Cool, all right. So now we have that working. So let's make that work a little bit easier. So we're gonna say, this dot set state. And we're gonna say active is set to event.target Dot data set.index. Okay? And we're just gonna go down on this image and we're gonna add a data-index to be equal to index.
[00:05:26] And no semicolon there. So, data index, this is just a normal HTML thing, this is not a React thing. If I wanna access something that's data dash blah on any sort of HTML element you can just say Event.target is going to be referring to whatever image you clicked on, right?
[00:05:49] Data set will let me access whatever I put on the HTML data set, right? And then index, just refers to whatever this is. So, if I call this data-lol, right? This would just be dataset.lol, right? It just, that's how that refers to each other. Now this is actually still not perfect.
[00:06:14] Typically, in JavaScript, we don't have to worry a lot about types. In this case, you actually need to be concerned about what the type is of index here. Here data-index, this is a number, right? Cuz it's coming from the map function here, right? This thing gets output to the DOM as a what?
[00:06:35] As a stream. So this is coming back in as a string, okay? So now I have active being string one, right? It's not one it's 1. Why is that problematic? Well here, I'm using images active as an index to grab whatever this is. So this is going to go and try and grab string one, not number one.
[00:07:04] That's a problem, it wouldn't work. So this is one of the cases we have to be concerned about what type of one am I talking about? So really easy way to do that, just put a, this is called the unary plus, right? This is just going to convert it to a number.
[00:07:24] There's a trillion other ways you could have done this, right? There's number.parseint, I think is what it is. There's several ways of doing it. This is just simple and succinct. But I could totally see someone saying, I don't know what that does and I don't think it's very readable.
[00:07:45] If you don't find it readable then don't do it that way. Okay, so now I should be able to refresh the page and I can switch doggy pictures. That's a very, good picture. And you can see my excessive whisky collection behind it, [LAUGH] Okay. So, we're now to 09, managing state and class components checkpoint, so feel free to grab that code if you're behind or want to see what I did.
[00:08:28] Yeah, Mark, okay.
>> Is the plus a React thing or a JavaScript thing?
>> The plus thing is a JavaScript thing, has nothing to do with React. So yeah, just to kinda drive that home, if I inspect element here, you can see here this has a dataset-index=0. And that is a string, right?
[00:08:45] So we're just, Yeah, if you do + 1 like that, it comes back as a number 1 as opposed to a string one, so that's why.