Complete Intro to React, v6 Manage State in a Class Component

Transcript from the "Manage State in a Class Component" Lesson

[00:00:00]
>> All right, let's write a bit more complicated class component just so you can kinda get some feeling of what it's like to manage state and class component. If we go back to our Adopt me, so one thing that you're gonna definitely have to do after we did that class properties thing.

[00:00:20] You're gonna have to start and stop your server because Parcel is not gonna pick that up automatically. So I should be able to run NPM, run dev. Literally just stop and start it again. Refresh my page, everything's good again. If that's still not working for you, obviously it worked for me, I imagine it'll work for most of you.

[00:00:46] But I'm just gonna show something. Whenever Parcel gets in a bad state, just do rm-rf.cache and dist. Just remove those two folders. They're generated by Parcel, and then just run the server again. It just clears out all of its cache, right? So that it starts fresh. It'll take a bit longer, you can see this took me six seconds instead of 5.3.

[00:01:10] It takes a little bit longer for it to get started, but obviously it's fine. Refresh, everything's fine. Okay, so let's go manage state and a more difficult class component. Let's create a new file and we're going to call it carousel.JS. So if we go look at our API again, this is the one for Luna here.

[00:01:39] You can see that she has five different images of her that come back from the API. And we wanna be able to nicely rotate through all of those, right? So if a user clicks one of them, it shows a nice picture of them and they can look closely at each one of the pets.

[00:01:53] So let's do exactly that. We're gonna import component from React. We're gonna say class carousel extends component. We're gonna say the state is equal to the first network that's gonna be active, right? The first photo that we're gonna show is the first one in there. We're gonna have some default props.

[00:02:27] So we're gonna give it a static default props = images. And we're gonna give it that default image again if it doesn't have an image by default. http://pets/images.dev/apis.com/pets/none.jpg. So let's talk about this for just a second. Basically we're saying, hey, if you don't give me props for images, don't worry, I have some default ones I'm gonna fall back onto.

[00:03:02] These do have to be static. What does static mean? That means I can do carousel as an abstract clap, dot defaultProps. As opposed to what you would do before, which would be const carousel = new carousel. This is not gonna have carousel.defaultProps. Those won't be available. That's only available on the parent class here, right?

[00:03:38] The carousel with the capital C. What this will have is carousel.props, which may or may not be these default props. So that's what that static means. It means it's callable one the abstract class. And some of you might be looking as I got away from Java. So I didn't have to learn to do this stuff anymore.

[00:03:59] And typically in JavaScript, this is not really a thing. But in this particular case, it does make a difference. Some of these things do have to be static.
>> Is this we defaultProps the same as prop types in defaultProps or is it something?
>> It's different. So the question is, is this the same as prop types?

[00:04:22] Prop types is something totally different. I talked about my former course and I don't wanna derail on it too much. But it's basically just saying, if you don't give me images, here is some default images that we can use. So then we can always assume that there are images, which is good.

[00:04:37]
>> Okay.
>> The nice thing about this is, TypeScript will pick up on these and automatically it goes like, okay, this is an array of strings, cool. And you don't have to type your props anymore cuz it reads them off of the default props. Okay, so now we're gonna have a render, cuz as you may remember, everything always has to have a render no matter what.

[00:05:04] Const active, and we're gonna grab this off of state, this.state, and const images = this.props. Now let's chat a moment about this. What is state versus prop? One state is mutable, right? It's what you use hooks for previously. And mutable is just a really fancy way of saying that this is changeable.

[00:05:32] So I can call this.setState and I can modify what active is. This.props is what's coming from my parents. And you remember one-way data flow that we talked about earlier. This is one-way data flow, this is read only. I cannot change props. Only the parent can change props. So this is data flowing down from my parent.

[00:05:51] So I'm gonna get these images from my parent, which is gonna be the pet component. And so this stuff always comes from the parent whereas state is self-contained. It's always contained within the component itself. Now props might be state from the parent, right? And that's actually true. It is state from my parents.

[00:06:07] But that means that the parents gets to modify its own state, and I guess that probably bears mentioning as well. The only thing that can modify state is the component that contains it, right? Nothing else can modify state. So I can't call set state on a carousel from pet or app or results or anything like that, I can only do it from within carousels itself.

[00:06:28] Does that make sense? It's one of those things that is hard to explain because it should be kind of intuitively obvious. And the more you get into it, it just kinda feels that way. And let's just kinda get into it and I'll explain more as we're going. All right, so I'm gonna say return here.

[00:06:51] We're gonna have a div that's gonna encapsulate everything. ClassName = carousel. We're gonna have an image, source is gonna be equal to images active, right? Whatever the currently selected image is, that's gonna be the hero image here. The alt is gonna be, this doesn't actually have the name being passed into it, so I just put animal.

[00:07:25] But we probably could have done a better alt text here by passing in the name as well. But for now we're just gonna leave that off. And the div className = carousel-smaller. And I'm gonna do images.map, photo and index. Okay, and then we're going to say image, Key = photo cuz that URL is gonna be guaranteed unique.

[00:08:23] Src = photo. And then className, when someone has selected the pet, right? So if someone clicks on image 3 and then they select that, we wanna show an active class. So the way we would do that is index === active ?"active" or nothing, right? So, if it's selected, put an active class on there.

[00:08:57] If it's not selected, don't put a class on there. There's other libraries, like CLSX, I think is one of NPM packages that make this, it's a nice little function helper that helps you do this, but this is just one ternary that kinda helps us do it. So again, if index is equal to active, put active, if not, put nothing.

[00:09:22] And then the alt, we're gonna put animal thumbnail. Okay, and then at the bottom, make sure you export default carousel. Okay, let's go implement this with details. So we're going to import, Carousel, sorry, carousel like that, from dot/carousel. Okay, here we're gonna have to grab images as well, cuz that's gonna be what's fed into carousel.

[00:10:17] And then the first components are the div details. So here we're going to put Carousel images = images. So here on line 39, we just put it there. Okay, so now we should be able to pop over to our Adopt Me page. And you can see there now we have Luna sitting in my suitcase when I was trying to pack to come, pack to travel.

[00:10:56] She does not like it when I travel. So it's still not interactive yet. We can't click on these images, so we do have to go make those interactive. But just to kinda show you how the default props work cuz we saw those. Let's just make it so images is equal to empty brackets there.

[00:11:18] Well, actually nothing, cuz you don't wanna pass anything into there. So let's just delete that altogether. And now you can see, that's what the defaultProps do. It's like if I don't pass anything in for that, it's gonna like, okay, I got default props, and this is what populates there.

[00:11:41] I absolutely love the art that Alice did for this, right? Super cute. Okay, but we do have images, let's put those in there. And we have images, And then last thing we need to do is we just input an event handle on here and then it's just gonna work.