Complete Intro to React, v6 Interactive Class Component

Transcript from the "Interactive Class Component" Lesson

[00:00:00]
>> So, going back to Carousel. What we need to do is we need to add some way of having an event listener, right? So, some sort of like event handler, yeah, it's just that. So, we're gonna put in a the function called handleIndexClick. And we're going to give it an event.

[00:00:32] And then, here, we're just gonna say this dot setState. And then, we wanna somehow get that index back from which one they clicked on, right? So, if they clicked on number three here, we wanna get that back so that we can set that as the state. And so, how do we do that?

[00:00:54] Well, just normal HTML stuff. We're just gonna say data Dash index. Okay, and then we're gonna say index. And then, now, we can grab this index here off of the event. Might as well put our onClick handler here. This dot handleIndexCclick. So, you're gonna notice right away, the accessibility no-noninteractive-element clicks.

[00:01:29] This is absolutely valid and you should absolutely not ship this production, right? Because an image is not a button, so therefore, a screen reader would not find it. Without the sake of complicating this too much, I'm just gonna, for now, put this as slash, slash eslint-disable-next-line. But suffice to say, this should be a button, okay?

[00:01:59] All right, so here, we're gonna say this dot setState. We're gonna say active, and then we're gonna say event dot target dot data set dot index. Now, I'm not gonna get too much into this, this is just normal browser stuff. The event dot target is actually gonna be the image tag here, right?

[00:02:25] And the data set is going to be things that you do like data dash blah. So, data set's gonna be if I had one for a data dash whatevs, right? That would come up here as data set dash dot whatevs, right? Okay, last thing here is this actually comes back as a string, cuz reading that from the DOM, right?

[00:02:51] So, we actually want this to be a number. So, an easy way of doing that is just prefixing it with a plus sign, and that will actually coerce it so this will actually be a real number now. So, make sure that's a number just by putting that plus sign there.

[00:03:03] There's other ways of doing it, but that's just the easiest way. You could also do zero plus event type, that would work as well. There's a bunch of things, easiest way for me is plus sign. And now, we save it. Refresh. If we start clicking on these, still not working, why is that?

[00:03:38] This is undefined. Well, that's unexpected, right? Why would this be undefined? I just said here this dot setState, shouldn't that refer to Carousel? Well, it actually works just like how the browser works. If I set an event listener and I don't bind what this is, what is this going to be?

[00:04:02] Let's actually take a look. Click on that. You can see here, it actually logs out undefined. It's because it's being called outside of any sort of context. Well, that's unfortunate, right? You have a couple of options here. You can do this dot handleClick dot bind(this), this'll work. In fact, if I save now, I'm pretty sure it will.

[00:04:37] That works just fine, right? But I'm gonna show you my favorite way, you can also do it in the constructor. The constructor, you can say this dot handle click equals this dot handleClick dot bind(this), that would totally work as well. That's how I used to do it. But because we have this class property, seems to me we can kind of cheat a little bit and it's kinda fun, and I'm gonna show you how.

[00:04:58] handleClick equals (event), and we turn this into an arrow function like this. This'll actually work now, and it's cuz of the way that arrow functions work. If I refresh, notice is still works, notice that the context of this is correct. The reason for that is whenever you do arrow function, it doesn't create a new this wherever it is, right?

[00:05:28] So, whenever I call handleClick index, it's not going to get the this from wherever it's called, it's gonna get the this from wherever it's created. If you wanna get more into that, there's plenty of JavaScript courses here on Frontend Masters, they'll talk all about it. But suffice to say, if you need to get this to be correct with class components, this is a really easy way to do that.

[00:05:49] Just make it an arrow function and everything will work.