1 00:00:00,860 --> 00:00:05,360 In the last section we spoke about how we can somewhat fix this issue of tiling and making sure we don't 2 00:00:05,360 --> 00:00:11,780 have too much space here by using the grid row and rule but we really need to specify a grid row and 3 00:00:11,780 --> 00:00:15,630 value depending upon the height of each individual image. 4 00:00:15,770 --> 00:00:19,090 So to solve this we're going to create a new re-act component. 5 00:00:19,480 --> 00:00:25,620 This reac component is going to be responsible for rendering one single image at a time once the image 6 00:00:25,620 --> 00:00:26,270 is rendered. 7 00:00:26,270 --> 00:00:32,420 This component is going to figure out how large the image is and then adjust this grid row and rule 8 00:00:32,510 --> 00:00:34,700 to accommodate for that image size. 9 00:00:34,700 --> 00:00:37,640 Now in practice it's give me a little bit more easy than it sounds. 10 00:00:37,640 --> 00:00:43,470 Essentially what we need to do right now is create a new component that's going to render each individual 11 00:00:43,500 --> 00:00:47,270 image as opposed to the straight image tag that we're using right now. 12 00:00:47,610 --> 00:00:52,230 So inside of my code editor I'm going to find my components directory and inside there I'm going to 13 00:00:52,230 --> 00:00:55,650 make a new file called Image card. 14 00:00:55,740 --> 00:00:56,750 Yes. 15 00:00:56,820 --> 00:01:02,440 So the purpose of this of this compound right here is to show one image by itself. 16 00:01:02,520 --> 00:01:06,690 Let's just focus on that for right now and then once we figure out how to do that we'll then figure 17 00:01:06,690 --> 00:01:07,170 out how to do. 18 00:01:07,170 --> 00:01:10,490 Like the auto adjustment of the great Roe and stuff. 19 00:01:10,560 --> 00:01:17,220 So inside of image card I'm going to import re-act from react and then make a new class called Image 20 00:01:17,220 --> 00:01:22,370 card that extends re-act component. 21 00:01:22,550 --> 00:01:25,270 Then inside of your we'll start simplify right now. 22 00:01:25,380 --> 00:01:28,300 I'll say that this thing has a render method. 23 00:01:28,320 --> 00:01:38,980 It's going to return a div and inside that div I'm going to put my image tag. 24 00:01:39,020 --> 00:01:44,750 Now we're gonna specify a Allt property and a source on this thing as well at the same time. 25 00:01:44,780 --> 00:01:46,120 So I'll do an alt. 26 00:01:46,250 --> 00:01:51,920 We will assume that our image object is going to be passed to the image card as a prop called image. 27 00:01:52,070 --> 00:01:57,800 So to specify the property as we did before inside of image list where we use the description I will 28 00:01:57,800 --> 00:02:05,660 say this does props that image description. 29 00:02:05,850 --> 00:02:10,380 And then for the source I will do when I do a new line here because this is definitely going to be a 30 00:02:11,280 --> 00:02:12,590 very long tag. 31 00:02:12,930 --> 00:02:15,500 I'll do a source of this props. 32 00:02:15,570 --> 00:02:18,440 Image you or else. 33 00:02:18,490 --> 00:02:20,720 Regular. 34 00:02:20,830 --> 00:02:28,070 And then finally at the bottom I will export default image card like so. 35 00:02:28,090 --> 00:02:31,030 All right I know I'm putting this code together very quickly here. 36 00:02:31,050 --> 00:02:35,640 All we're doing is creating a new component that right now is showing a div with an image inside of 37 00:02:35,640 --> 00:02:36,260 it. 38 00:02:36,630 --> 00:02:42,000 This component expects to be passed a prop of our image object or the thing that we got back from that 39 00:02:42,190 --> 00:02:44,950 on Splash API as a prop called image. 40 00:02:45,180 --> 00:02:50,130 So let's save this thing we'll flip back over to the image list file and we're going to use this image 41 00:02:50,130 --> 00:02:55,820 card inside of our list as opposed to the current straight image tag that you see right here. 42 00:02:55,830 --> 00:03:01,800 So I'm now inside of image list going it claps my sidebar so we can see this more easily at the top. 43 00:03:01,830 --> 00:03:10,680 I will import image card from Image card and then right here rather than doing the plane image will 44 00:03:10,680 --> 00:03:12,830 do image card. 45 00:03:12,960 --> 00:03:21,950 And now we do not need to pass in the description or the prop We do not need to pass in the sarcy all 46 00:03:21,950 --> 00:03:24,110 we need to pass on is the image itself. 47 00:03:24,320 --> 00:03:27,380 So no longer am I going to do destructuring right here. 48 00:03:27,590 --> 00:03:33,300 I'm going to return it to its original form where we were receiving the entire image object and I'm 49 00:03:33,300 --> 00:03:36,960 going to pass that image in as a prop called image. 50 00:03:37,260 --> 00:03:40,140 And then finally I need to fix up the idea right here. 51 00:03:40,140 --> 00:03:42,000 We still need to provide a key. 52 00:03:42,090 --> 00:03:47,550 And so now the idea is going to come from Image dot ID because as I said we are no longer destructuring 53 00:03:47,610 --> 00:03:49,240 the id property out of that thing. 54 00:03:50,620 --> 00:03:50,890 OK. 55 00:03:50,920 --> 00:03:55,540 And we should now be able to save this and then flip back over to our browser and we should still be 56 00:03:55,540 --> 00:03:57,420 able to see a list of images. 57 00:03:57,700 --> 00:03:58,180 Awesome. 58 00:03:58,180 --> 00:03:59,180 Looks like we are. 59 00:03:59,650 --> 00:03:59,920 All right. 60 00:03:59,920 --> 00:04:03,000 And then very quickly I want to make sure we don't have any errors or warnings. 61 00:04:03,040 --> 00:04:04,070 Yep that looks good. 62 00:04:04,840 --> 00:04:05,060 OK. 63 00:04:05,080 --> 00:04:08,950 So we've now got kind of feature parity here by creating this new component. 64 00:04:08,950 --> 00:04:12,740 Let's continue working on sync because we've got a couple more things to do now. 65 00:04:12,760 --> 00:04:16,810 The first thing I know without doubt I can tell you right now we're going to have to refer to this image 66 00:04:16,840 --> 00:04:22,320 objects several times inside this render method rather than referring back to it with this stop Propp 67 00:04:22,320 --> 00:04:27,190 site image over and over let's deep structure out just the properties we care about. 68 00:04:27,190 --> 00:04:30,190 Off of this stop Propst image as we did before. 69 00:04:30,310 --> 00:04:37,860 Back over here inside of our map function so inside my render method Osei Konst description and your 70 00:04:37,870 --> 00:04:39,760 els. 71 00:04:39,960 --> 00:04:44,280 And that's going to come from this stock prop's dot image. 72 00:04:44,480 --> 00:04:50,720 And now inside of this tag right here I can reduce it down to just description and down to just your 73 00:04:50,730 --> 00:04:55,910 Elle's regular OK I'll save. 74 00:04:55,940 --> 00:04:58,680 And it looks like we condensed to that right there. 75 00:04:59,000 --> 00:04:59,210 OK. 76 00:04:59,210 --> 00:05:00,200 So looks pretty good. 77 00:05:00,320 --> 00:05:01,150 Let's take a quick pause. 78 00:05:01,160 --> 00:05:04,970 When we come back the next section we're going to add a little bit more code to our image card to make 79 00:05:04,970 --> 00:05:11,210 it look just a little bit better and we'll start to focus on adding in all of that grid Arturo's and 80 00:05:11,360 --> 00:05:13,160 the grid row and did all that good stuff. 81 00:05:13,160 --> 00:05:15,410 So quick pause and I'll see you in just a minute.