Handling Events in Class Components

[00:00:00]
>> Okay, I have one more thing that I wanna show you here. So I want you to be able to click on one of these images, and have it update the hero image. So I wanna add some interactivity to this. So we're gonna make a function here to handleIndexClick.

[00:00:20]
And we're gonna make this a function now I could just make this a function where I do this, but the problem is and this is the weirdness that comes with class components is what this is, is important so if I do this handle index click and I say whenever someone clicks on one of these.

[00:00:36]
So unclick. This dot handle index click. So, we're gonna do a bad accessibility thing right now and it's, I'm sorry, so we're gonna say eslint-disable. Actually, we're gonna do it this way. Just Disable that totally, okay. So, I have this handle index click, and if I do, just, console dot log, this What do you think this is?

[00:01:16]
A trick question by the way, I think it's window. Let me check, cancel. So click undefined, so I was wrong. See? I want it to be the component right? bunch of ways to handle this, easiest one is make this an arrow function like that. Now, if I go back and do it again it's the carousel.

[00:01:46]
Why does that work well whenever you do an arrow function it doesn't create new scope, when you invoke an arrow function doesn't create new scope versus when you have a normal function whenever you invoke it it creates a new function a new scope at the point of invocation, So because this function is invoked, as an avant listener is invoked with no context.

[00:02:08]
Whereas this will capture the scope of wherever it was written. So in this case, it captures it at caresole. That make sense? Kind of it's JavaScript weirdness to really under to let you know. Okay, so now that we have the correct scope, we're gonna say this, and then we want this to take in the event as well or es I've been calling it, this does set state Okay and we want active to be event dot target dot data set dot index Okay that's an event we want e rather.

[00:02:55]
II Okay, and then I don't think we gave this an index yet. Yeah, we did. So under the un click here give this data dash index equals index, which comes from here. Okay. Still, there's still a problem with this, but let's talk about what's happening here. So, I click on this, this is gonna call this function, which is gonna take in this event, which and then we're gonna call this dot set state, which is basically, you provided an object, and it's going to do an object merge, basically like an object at a sign, of your current state, with whatever you have here.

[00:03:36]
So, if I had a second thing here, which is let's just say, name Luna or something like that. If I do this, it's only going to overwrite active it's going to leave whatever else is there alone right just like object assign does k and then it's going to set that the active to be whatever the E dot target which will be this image, right?

[00:03:56]
data set, which refers to all data dash things on an object. That's a DOM method Index. What type is index? A string because everything that comes out of the DOM is the string all the time. Despite the fact that we give it a number here, doesn't matter, it comes back out of the DOM as a string because everything that's in the DOM is the string.

[00:04:22]
So this is called a unary plus which just takes a string and turns it into a number to prove my point if I do plus five If I get the number of five back, that's what it's doing. It coerces a string to a number. There's other ways to do it.

[00:04:45]
I just think this is elegant. So I do it that way. So now active is a number. It's important because we use it here as a number, so it must be a number. So now I think If I click on these, It'll change pictures. So I don't know, what do you think?

[00:05:04]
Do you like this class component or do you like functions?
>> [INAUDIBLE]
>> There's things like about both. And if if you feel a little conflicted about it, I feel like I've done my job. Now, if you want to get way back there was a thing called react create class.

[00:05:24]
That was a very nice API. Because all the stuff that you have to do to like bind this to be the right thing, react. Duck Creek class used to do that for you. And they got rid of it. I'm sad about it. They got rid of it because they wanted to lean into this.

[00:05:39]
Es six classes had just come out. They wanted to lean into the features of JavaScript. So like, well, let's conform to the language. Very reasonable thing for them to say. This was just really nice. That's all. Okay. I'm just gonna say it again, you cannot use hooks here.

[00:06:01]
So I cannot say const, like use query could not be used here. Use breed lists could not be used here. Class components can't have any of those things. You have to do things like higher order components and things like that, we might get into a tiny bit of that.

[00:06:20]
But let's say okay, let's say we wanted to use use breed list for some reason here. The way that you would do that don't I'm just showing an example so don't don't have to copy this. You would say function CarouselParent, and let's say it took in an animal, you would say, okay, const [breedlist] = useBreedlist Animal, right?

[00:06:58]
And then you would just feed that into carousel. So you would return carousel with a breed list. Equals breed list. So basically what the way you handle that if you need to use a hook with a class component is you make a tiny, top level parent component and then here I would export carousel parent.

[00:07:25]
Right?.What is this? This is just a tiny, tiny little component that then takes something and passes it down to the child. [INAUDIBLE] Right, does that make sense? If you looking as like that's dump, kinda dump, yeah, that's really is but this is how you do it. Does that make sense?

[00:07:45]
okay. So, for example actually we might end up doing this, i don't remember if we end up doing it, But if you wanted to use like react router, I think now only ships hooks, right? So if you wanna use a hook in a class component from React router, you must do it this way.

[00:08:07]
Last questions. Yeah. So this, class component. For the purpose of this course, was just to get us familiar with that concept.
>> Yes, this absolute can be written as a function component.
>> Would you suggest so
>> makes no difference. In this particular case, everything we've written so far has been a function component There is positively zero reason for us.

[00:08:31]
To switch using a class component. So I would suggest you'd use a function component in this particular case. But if I show up in your codebase and. This was there, I. Would not be offended by this. Someone might, but I wouldn't. The next thing that we're about to write, the error boundary.

[00:08:47]
Must be written. As a class component. It literally cannot. Do that in a function component. Must be written as well Class component, so this was kind of to get you used to that idea and then we're gonna hop into an error boundary.