Complete Intro to React, v5 Creating an Image Carousel

Transcript from the "Creating an Image Carousel" Lesson

[00:00:00]
>> Brian Holt: I want you to go make a new file now called carousel.js.
>> Brian Holt: So you want to make like a nice Carousel so that people can like see the various different pictures of the animals, right?. So first thing we're gonna do here is we're gonna say import React from 'react'.

[00:00:28]
>> Brian Holt: And then we're gonna say class Carousel extends React.Component.
>> Brian Holt: Okay, so this is gonna have two things we're gonna have an array of all the various different images, and we're gonna have which one we're currently showing, the active one, the active index. So we're gonna say state =, and the photos is gonna be an active array, and active is going to be a number.

[00:00:57] So we're gonna by default select the first one.
>> Brian Holt: Okay, and then let's go ahead and make the render,
>> Brian Holt: So when I say const photos and active = the stats state and we are going to return a div class name = carousel.
>> Brian Holt: Carousel is a word that the more I type the more it looks strange, I just can't, don't know I don't understand it.

[00:01:49] Then we are gonna put and image and the source is gonna be equal to photos, active, right?
>> Brian Holt: So, photos active, this is gonna be an array of photos and stuff I select the second one, that will be two, right? And I'll select that one. And then, the alt text here will put for it is animal or something like that.

[00:02:23]
>> Brian Holt: And then we are gonna put do class name = carousel- smaller.
>> Brian Holt: And then here inside of that we are gonna put photos.map,
>> Brian Holt: And then map has two parameters that it provides. One of them is the photo, right? But it also gives you a second one that is the index.

[00:02:53] So when you grab that index as well,
>> Brian Holt: And then we're gonna do an implicit return here.
>> Brian Holt: If we were being more attentive to better accessibility practice is here. Probably what we'll do is to make this little button, right? Like to see we'll click on the smaller buttons and that would cause an interaction over here.

[00:03:20] Cuz buttons handle focus a lot better for just the sake of time don't do this in production but I'm gonna show you just to put the event listener directly on the image.
>> Brian Holt: So the key is gonna be the photo.
>> Brian Holt: And then onClick where gonna have to do something with that.

[00:03:38] So we're gonna say this.handleIndexClick, which we will build here momentarily.
>> Brian Holt: When you give it the data- index, and what we're gonna do with this is here instead of the handle index click if someone clicks on the button, then we're going to pull the index off of the image here.

[00:04:01] This is source equals photo className =. So, if the index is triple = to the active then we want to give it an active class. Otherwise we don't wanna give it a class okay, and then the alt is going to be animal thumbnail.
>> Brian Holt: Okay, and this is gonna say you did a really bad thing just belong interact developments with quick handle must have at least one keyboard listener.

[00:04:41]
>> Brian Holt: So here you can do something like on.
>> Brian Holt: On key op or something like that, equals handle something like that. We're not gonna do that right now. For now, we're just going to ignore this.
>> Brian Holt: I like hesitate to teach people that you can do this, it's like you can ignore anything, cuz one of these is eventually gonna be my core work and am gonna be so upset at you.

[00:05:22]
>> Brian Holt: I went through and did this correctly and it takes a lot of time to get the accessibility correct on this, so for now I'm admonishing you to do it correctly, but we're just gonna move on for now.
>> Brian Holt: Okay, so now we have to go make this handle indexClick.

[00:05:39] Let's go ahead and just do the export at the bottom because I always forget this. So export, default, carousel, like so and then now we're gonna go make the handle indexClick. Well, let's do the derive state first this is kind of a fun one. So the photos are gonna be passed in from the parent component into the carousel ride, so it's not gonna get request in the details page, it's gonna request that, and then we're going to set that here in carousel, right?

[00:06:12] But the pair is gonna give us a large object full of lots of photos in various different sizes and they actually just want to weed out. So just the sizes that we need. So, I'm gonna show you how to use static getDerivedStateFromProps, I'm gonna grab media out of this, so this is a special react method that it must be static, okay.

[00:06:37] And what it's gonna do is, it's gonna take in a set of props and give you back a new set of states. So I'm gonna say let photos equals new array full of another place correlate picture. Place corgey.com/600x600 like that. So this would be the default image if it doesn't have any images, okay?

[00:07:05] Otherwise, if media.length, then I want you to say photos = media.map and I'm just gonna pull out all the large photos.
>> Brian Holt: Large and return that.
>> Brian Holt: Right, so these photo objects will have small, medium, large and full, and we're just grabbing the large photos out of them.

[00:07:36] So now photos will just be an array of strings of URLs, okay? Then down here we're going to return whatever object that we want to be merged into the state. So we're gonna say return photos.
>> Brian Holt: So, again, getDerivedStateFromProps takes in a set of properties, does some filtering on them and then passes that on to the component.

[00:08:09] So this component's actually never gonna see the media props. It's never really gonna use them, right? It's gonna use this photos which is gonna keep in state. So if you have any derived state, this is a good way to handle those situations. You don't have to do it this way.

[00:08:24] I totally could have come down here and said, instead of photos dot map, I would have said this stop props.media.map. And then here I'll set photo.large and photo.large. I'll leave it to you decide if you think this is a good idea or not, I like it because it abstracts out some of the logic into this kind of handler, but

[00:08:52]
>> Brian Holt: Up to you.