1 00:00:00,830 --> 00:00:04,130 In the last section we spoke about the purpose of kids when rendering lists. 2 00:00:04,310 --> 00:00:08,810 So let's now flip back over to our code editor will find the image list component and we're going to 3 00:00:08,810 --> 00:00:10,440 do a little update to this then. 4 00:00:10,760 --> 00:00:17,900 So here's where we are rendering our list of items we want to find the root GSX tag that is being returned 5 00:00:17,900 --> 00:00:19,160 from our map statement. 6 00:00:19,160 --> 00:00:26,240 So in that case it is very plainly the image and so on the image I'm going to add a key prop and I'm 7 00:00:26,240 --> 00:00:31,960 going to give it a I.D. out of this image object image dot ID. 8 00:00:32,080 --> 00:00:36,400 Now this I.D. property right here not just like making that up or pulling it out of thin air. 9 00:00:36,490 --> 00:00:41,860 If you actually go back over to your application and again and go to the network request tab and look 10 00:00:41,860 --> 00:00:48,180 at what gets sent back over to us from the API you'll notice that every single one of these objects 11 00:00:48,180 --> 00:00:51,620 has an IP property that uniquely identifies it. 12 00:00:51,630 --> 00:00:53,170 So I didn't just make up that id property. 13 00:00:53,160 --> 00:00:57,660 It's something that actually exists inside of this image object. 14 00:00:57,660 --> 00:00:57,930 All right. 15 00:00:57,930 --> 00:01:00,580 So I'm going to save this as a quick note. 16 00:01:00,600 --> 00:01:06,030 I mentioned just a second ago that we're going to add the key property to the root tag that we are returning 17 00:01:06,030 --> 00:01:07,590 inside the map statement. 18 00:01:07,590 --> 00:01:13,950 When I said that I meant to say that if we had some like div that wrapped the image like so then we 19 00:01:13,950 --> 00:01:18,350 would add this key property to that div instead and not the image anymore. 20 00:01:18,510 --> 00:01:23,660 So we only have to assign the key to the root element that we are returning from a list of records or 21 00:01:23,660 --> 00:01:26,870 already in a list of different components. 22 00:01:26,890 --> 00:01:33,330 In this case no need for the div some is going to return the image by itself like the OK so Will now 23 00:01:33,330 --> 00:01:34,300 flip back over. 24 00:01:34,530 --> 00:01:38,640 I'm going to leave my console open just in case we get another error. 25 00:01:39,000 --> 00:01:41,810 I'll zoom in a little bit so I can actually see what's going on again. 26 00:01:42,000 --> 00:01:43,790 And then I'll search for cars. 27 00:01:44,100 --> 00:01:44,400 OK. 28 00:01:44,430 --> 00:01:44,820 Looks good. 29 00:01:44,820 --> 00:01:48,090 So we don't have a warning or error message anymore. 30 00:01:48,100 --> 00:01:50,360 Now I notice one other little thing here. 31 00:01:50,410 --> 00:01:55,350 Reality has or is shipped recreate react up to be precise create racked up has a little set of rules 32 00:01:55,590 --> 00:02:02,070 that wants you to that wants to see you put in a Allt prop or essentially a descriptive or a description 33 00:02:02,100 --> 00:02:06,630 of the image that we're trying to show on the screen in case the image is not able to be fetched or 34 00:02:06,660 --> 00:02:10,560 if someone with accessibility problems is using our site. 35 00:02:10,560 --> 00:02:17,130 So just to get that little warning to go away we can add in a prop to these images as well. 36 00:02:17,310 --> 00:02:23,460 But the prop fortunately each one of these images that we're fetching has a description property right 37 00:02:23,460 --> 00:02:26,740 there so we can use this description for the image itself. 38 00:02:26,750 --> 00:02:34,400 It's a perfect use case for the prop I guess I'll put an image description like the. 39 00:02:34,450 --> 00:02:34,690 All right. 40 00:02:34,690 --> 00:02:35,860 Now one last thing I want to do here. 41 00:02:35,860 --> 00:02:41,030 You'll notice that we are referencing the image variable three times inside this mapping function. 42 00:02:41,050 --> 00:02:46,810 So rather than keeping on referencing that variable again and again and again we can just do restructure 43 00:02:46,810 --> 00:02:52,630 out the three properties we care about inside of this inner function description ID and you or else 44 00:02:52,980 --> 00:02:55,600 to do so I'll find that image argument. 45 00:02:55,600 --> 00:02:57,130 I'm going to delete it. 46 00:02:57,130 --> 00:03:02,350 I'll put down a set of parentheses and a set of curly braces inside that. 47 00:03:02,550 --> 00:03:05,510 And then I can structure off description ID. 48 00:03:05,640 --> 00:03:14,190 And you are L's like so and then I can remove the image and the Daut the ID and the DOT and the image 49 00:03:14,250 --> 00:03:16,010 and the dot or see me. 50 00:03:16,010 --> 00:03:19,260 I didn't mean to say id and dot that was image and Dot. 51 00:03:19,560 --> 00:03:19,940 OK. 52 00:03:19,980 --> 00:03:21,140 That's it. 53 00:03:21,150 --> 00:03:23,450 Little bit shorter than what we had before. 54 00:03:23,480 --> 00:03:27,500 So going to save this will do one more quick test. 55 00:03:27,650 --> 00:03:29,900 Make sure we don't have any warnings or anything like that. 56 00:03:29,910 --> 00:03:33,590 So search for cars and no warnings no error messages. 57 00:03:33,950 --> 00:03:34,550 OK. 58 00:03:34,550 --> 00:03:40,100 So that is pretty much it for showing a list of elements we've now got our list of car pictures or whatever 59 00:03:40,100 --> 00:03:41,630 it is that you want to search for. 60 00:03:41,630 --> 00:03:42,410 I don't know why. 61 00:03:42,410 --> 00:03:45,190 As example I kept on saying like trees and plants and flowers. 62 00:03:45,200 --> 00:03:48,390 I don't know why that came to mind but you know what that will do flowers anyways. 63 00:03:48,560 --> 00:03:51,410 So we definitely got our list of images here which is fantastic. 64 00:03:51,860 --> 00:03:55,450 But that's really just the one of our application. 65 00:03:55,490 --> 00:04:01,520 Remember we had said we just want to get the list of images to show up so we're not going to say cool 66 00:04:01,700 --> 00:04:02,750 looks good. 67 00:04:02,750 --> 00:04:05,330 Now we're going to start to do some extra credit. 68 00:04:05,330 --> 00:04:05,660 All right. 69 00:04:05,660 --> 00:04:10,130 So what we're going go through starting in the next video is stuff that you don't necessarily have to 70 00:04:10,130 --> 00:04:12,480 know to understand react and how it works. 71 00:04:12,500 --> 00:04:17,660 We're going to go over a couple of topics that are decidedly penned not related to react but nonetheless 72 00:04:17,660 --> 00:04:19,680 I think it's going to be some pretty interesting stuff. 73 00:04:19,700 --> 00:04:23,760 We're going to figure out how to style these images far better than they are currently displayed. 74 00:04:23,930 --> 00:04:27,010 So quick pause here and we'll continue in the next video.