1 00:00:00,870 --> 00:00:04,190 In the last section we got a quick review of map statements in Javascript. 2 00:00:04,330 --> 00:00:10,030 So we're now going to use that knowledge to return a list of images from our image list component to 3 00:00:10,030 --> 00:00:17,830 do so I'm going to remove that console log and then I'm going to do a map over props dot images like 4 00:00:17,830 --> 00:00:18,920 so. 5 00:00:19,000 --> 00:00:24,220 So I'm going to put an arrow function into this thing and this inner function or the inner arrow function 6 00:00:24,220 --> 00:00:28,690 right there is going to be called with each image from our list of images. 7 00:00:28,700 --> 00:00:35,320 So now we need to use that image property or that image object right there to somehow return a image 8 00:00:35,380 --> 00:00:38,050 tag that has the appropriate source. 9 00:00:39,530 --> 00:00:44,090 Now this image argument right here is going to be exactly identical to some of those different objects 10 00:00:44,090 --> 00:00:48,290 that we have been Konsole logging out inside of our application just a little bit ago like here's one 11 00:00:48,290 --> 00:00:48,970 right here. 12 00:00:49,220 --> 00:00:54,620 If you don't still see this console log you can pull open the image definition by doing a another search 13 00:00:54,860 --> 00:00:59,810 and then go into the network tag and finding the request that was made number you want to select the 14 00:00:59,810 --> 00:01:05,750 preview tag right here so I can look in results and I can look at the definition of each of these different 15 00:01:05,780 --> 00:01:07,100 images. 16 00:01:07,130 --> 00:01:11,660 You'll recall that we kind of already looked through here a little bit inside of this image object is 17 00:01:11,660 --> 00:01:16,850 the you are ELAS property and it has a links links to a couple of different URLs inside of here. 18 00:01:16,850 --> 00:01:19,380 Chances are we want the regular one. 19 00:01:19,390 --> 00:01:24,050 So back inside of our image list to specify the actual You are L for the image you want to show on the 20 00:01:24,050 --> 00:01:24,820 screen. 21 00:01:25,040 --> 00:01:35,260 We will reference image dot your L's dot regular and that's going to return that really long you are 22 00:01:35,260 --> 00:01:42,690 l right there and then finally we need to make sure that we take this rate that gets returned from the 23 00:01:42,690 --> 00:01:45,470 map statement and return it from the image list. 24 00:01:45,690 --> 00:01:51,360 So I'm going to assign the array that gets created two images and then I will reference that variable 25 00:01:51,360 --> 00:01:53,470 inside the div like the 26 00:01:56,610 --> 00:01:57,630 now as a quick side note. 27 00:01:57,690 --> 00:02:02,570 So you know we don't have to always return a div or some element from a component. 28 00:02:02,640 --> 00:02:08,730 We could have just as easily return that array directly like so that would have been an option but when 29 00:02:08,730 --> 00:02:14,160 we eventually come back to this component and do some of that work for the V-2 version of all the stuff 30 00:02:14,160 --> 00:02:18,780 right here we're going to need to be wrapping this list of images with a couple of different elements. 31 00:02:18,810 --> 00:02:24,390 So that's why I'm just going to leave the div in here for now even though it's not strictly necessary. 32 00:02:24,390 --> 00:02:29,740 All right so I'm going to save this and it will flip back over to our application. 33 00:02:29,890 --> 00:02:35,670 I'm going to leave my console open just in case we get any errors and I'll do a search for cars. 34 00:02:35,680 --> 00:02:39,740 All right so I zoom away out because that's a really big image. 35 00:02:39,770 --> 00:02:44,020 But you can see that we very plainly have a list of images now being displayed. 36 00:02:44,050 --> 00:02:45,770 All right this looks fantastic. 37 00:02:45,790 --> 00:02:49,210 You'll notice that on our console over here we got a little warning message. 38 00:02:49,300 --> 00:02:50,170 Let's take a quick pause. 39 00:02:50,170 --> 00:02:53,830 When we come back the next section will figure out exactly how to deal with this warning.