Complete Intro to React, v7 Managing State in Class Components

[00:00:00]
>> So the nice thing now by doing it this way I can guarantee that this dot props dot images is always in array. 100% of time is always going to be array. Which is nice because now I don't have to have like defensive checks is this an array do it this way is it not an array don't do it right.

[00:00:18] No one likes code like that. It's nice if you can just guarantee. Always gonna be an array, I can always treat it like an array. Otherwise here in my render method, I have to say if this dot state dot images otherwise make an array, otherwise use the one that exists there.

[00:00:36] Got this now. I just get to always assume cool images always going to be an array. Okay? Const active equals this.state const images quals this dot props, right? Upon activate of our state and images out of our props. I kinda put these side by side so you can kinda think about for a second, state belongs to carousel and carousel can change state, right?

[00:01:08] It can modify its own state. Props comes from something being passed in. So in this case, it's either gonna come from the default props, right? Which is basically gonna be, if I get no props give me this, or it's gonna come from the parent. Props are immutable, you cannot change them because they come from the parent.

[00:01:30] This is our one way data flow, right? This should jive with what I've already taught you so far, right? You don't change the props that come in from the parameters, right? But for function components. Same thing here, you don't modify the props that come in from the parent.

[00:01:45] It's one way data flow thing, okay. Return, And then here we're just gonna write a bit of markup. Div class name equals carousel. And here we're gonna put an image, source equals images active, right? This is gonna be The Active is what we get for the state's gonna be the index of whatever thing they've selected.

[00:02:19] And the all you probably have better all Texas but I'm just going to have animal for the moment. Div, class name equals carousel smaller. And then here, we're gonna have images.map. And then we're gonna have, we're gonna take in photo and index. Okay, and then we're gonna put an image here.

[00:03:00] Key={photo}. Src={photo} Class Name equals. So if it's the actively selected photo, we wanna make it give it an active class, right? So we're gonna say index triple equals active. And if it's active, give it an active class. If it's not active, don't give it a class. And the alt is gonna be equal to something like animal thumbnail.

[00:03:48] Okay? So, so far, we haven't given any interactivity has no ability to switch which one selected. But this probably should render pretty okay at the moment. So let's go do that, let's go make that work. I need you to pop over to your details page. And in your details page, we're going to import carousel from carousel.

[00:04:25] Here in your de structuring we got to pull out images. And the first component inside of DEV div dot detail so right here we're going to drop it Carousel. And we're gonna say images=(images). Okay, so I import the carousel at the top. I pulled images out here on line 22 in the structuring statement here.

[00:04:58] And then I just dropped the carousel component here above all the rest of the stuff, okay? So now you might need to start your server again. There we go and we put the nice that little carousel there. Let's go, if you click on the one with Luna, Luna has several pictures.

[00:05:32] So notice this one's a little bit different this is because it has the active class right so it has like an old, opacity set on it. But it doesn't have any interactivity yet, right? I can't click on these and I won't change it. We have to go add that part.

[00:05:50] Cool, if you're having weird issues with parcel at the moment or just what you either start and stop your server and that obviously worked for me. If that didn't work for me, then I would go delete parcel cache, and I would delete dist. Cuz those are generated files from parcel and then rerun it again.

[00:06:11] And just to show you how to do that dot parcel cache, just sometimes node modules. You shouldn't have to do that. I haven't had to do that in a while. But I would do it that way. And then I would just say npm run dev again. It'll take a bit longer to start up, so start totally from scratch, right?

[00:06:29] And then you should end up with something working again. Particularly when you modify Babel files like it's finicky. That's where that whenever you modify Babel, or like any like those config files for your build processes, it's a good idea to just start over from scratch.