1 00:00:01,020 --> 00:00:04,500 ‫Rendering lists is one of the most common things 2 00:00:04,500 --> 00:00:08,610 ‫that we do in basically all React applications. 3 00:00:08,610 --> 00:00:11,250 ‫You will probably do it like 100 times 4 00:00:11,250 --> 00:00:12,810 ‫throughout this course 5 00:00:12,810 --> 00:00:16,683 ‫and so let's now learn how to render lists in React. 6 00:00:18,030 --> 00:00:20,520 ‫But first of all, what do we actually mean 7 00:00:20,520 --> 00:00:22,470 ‫by rendering lists? 8 00:00:22,470 --> 00:00:26,280 ‫Well, basically rendering a list is when we have an array 9 00:00:26,280 --> 00:00:28,440 ‫and we want to create one component 10 00:00:28,440 --> 00:00:31,020 ‫for each element of the array. 11 00:00:31,020 --> 00:00:36,020 ‫So for example, here we have all starter data, remember? 12 00:00:36,330 --> 00:00:39,300 ‫So here we have an array of these objects 13 00:00:39,300 --> 00:00:42,030 ‫where each object is one pizza. 14 00:00:42,030 --> 00:00:43,560 ‫And so as you can imagine, 15 00:00:43,560 --> 00:00:46,890 ‫now we want to basically render this list. 16 00:00:46,890 --> 00:00:49,410 ‫So basically we want to take this array, 17 00:00:49,410 --> 00:00:51,960 ‫and for each of these pizza objects, 18 00:00:51,960 --> 00:00:55,710 ‫we want to automatically create one pizza component here 19 00:00:55,710 --> 00:00:57,573 ‫in our user interface. 20 00:00:58,920 --> 00:01:02,430 ‫So instead of calling or of using here 21 00:01:02,430 --> 00:01:05,550 ‫the pizza component manually one by one, 22 00:01:05,550 --> 00:01:08,430 ‫we want to do it all at once dynamically. 23 00:01:08,430 --> 00:01:11,550 ‫So if we have like four pizzas in the array, 24 00:01:11,550 --> 00:01:14,430 ‫then we want four components to be rendered. 25 00:01:14,430 --> 00:01:17,040 ‫But if we have like six or 10, 26 00:01:17,040 --> 00:01:21,806 ‫then we want 10 components to show up here in our app. 27 00:01:21,806 --> 00:01:25,860 ‫Okay, so let's now learn how to do this. 28 00:01:25,860 --> 00:01:29,640 ‫Now, the beauty of React is that for many things, 29 00:01:29,640 --> 00:01:32,520 ‫all we need really is the JavaScript knowledge 30 00:01:32,520 --> 00:01:34,290 ‫that we already have. 31 00:01:34,290 --> 00:01:36,510 ‫So for example, for rendering lists, 32 00:01:36,510 --> 00:01:39,690 ‫there's nothing new about React that we need to learn. 33 00:01:39,690 --> 00:01:43,260 ‫So it doesn't give us like a list element that we can use 34 00:01:43,260 --> 00:01:44,910 ‫or something like this. 35 00:01:44,910 --> 00:01:47,640 ‫All we need is the JavaScript knowledge 36 00:01:47,640 --> 00:01:48,960 ‫that we already have. 37 00:01:48,960 --> 00:01:52,473 ‫And in this case, all we need is the map method. 38 00:01:53,610 --> 00:01:57,720 ‫So let me show you how after all this talk. 39 00:01:57,720 --> 00:01:59,670 ‫So let's create a new diff here 40 00:01:59,670 --> 00:02:03,780 ‫and later we will convert this to an actual list element 41 00:02:03,780 --> 00:02:06,600 ‫but let's just start out with any element here. 42 00:02:06,600 --> 00:02:08,350 ‫It doesn't really matter which one. 43 00:02:09,690 --> 00:02:13,800 ‫And for starters, let's also comment out this code 44 00:02:13,800 --> 00:02:17,520 ‫right here and maybe you noticed here by the way, 45 00:02:17,520 --> 00:02:20,940 ‫that a comment in JSX is simply again 46 00:02:20,940 --> 00:02:24,900 ‫entering JavaScript mode so with these curly braces 47 00:02:24,900 --> 00:02:27,420 ‫and then this is just a JavaScript comment. 48 00:02:27,420 --> 00:02:31,230 ‫So this is one of the rules of JSX that was actually 49 00:02:31,230 --> 00:02:32,940 ‫in one of the slides 50 00:02:32,940 --> 00:02:36,450 ‫or actually in the only slide in the previous lecture. 51 00:02:36,450 --> 00:02:40,260 ‫So if you read that, then you're already familiar with this. 52 00:02:40,260 --> 00:02:44,523 ‫But anyway, let's now render our pizza list. 53 00:02:45,450 --> 00:02:48,903 ‫Let's remember, yeah, it's called pizza data. 54 00:02:51,300 --> 00:02:53,850 ‫So let's enter JavaScript mode here 55 00:02:53,850 --> 00:02:56,640 ‫and then let's take our pizza data, 56 00:02:56,640 --> 00:02:59,130 ‫which remember is just an array. 57 00:02:59,130 --> 00:03:03,120 ‫And then let's map over it. 58 00:03:03,120 --> 00:03:05,910 ‫So at map, we basically loop over this array 59 00:03:05,910 --> 00:03:08,250 ‫and create a brand new array. 60 00:03:08,250 --> 00:03:12,123 ‫So in this pizza data, each element is a pizza. 61 00:03:13,770 --> 00:03:17,760 ‫So let's do this and what we want in this new array, 62 00:03:17,760 --> 00:03:21,030 ‫so in the new array that will be the result of map 63 00:03:21,030 --> 00:03:25,560 ‫is for each pizza, a pizza component. 64 00:03:25,560 --> 00:03:28,800 ‫And now we can simply pass all of these props 65 00:03:28,800 --> 00:03:30,303 ‫in dynamically here. 66 00:03:31,710 --> 00:03:34,053 ‫Let's first close it like this. 67 00:03:36,030 --> 00:03:41,030 ‫So we can now say pizza. and I think it is name, 68 00:03:41,670 --> 00:03:43,260 ‫but let's check. 69 00:03:43,260 --> 00:03:46,350 ‫Yeah, so we have name, ingredients, price, photo data 70 00:03:46,350 --> 00:03:48,093 ‫and even this other property. 71 00:03:49,440 --> 00:03:51,420 ‫So if I give it a save right now, 72 00:03:51,420 --> 00:03:54,990 ‫we should already see the six components over there 73 00:03:54,990 --> 00:03:57,933 ‫and indeed, beautiful. 74 00:03:59,130 --> 00:04:00,240 ‫There they are. 75 00:04:00,240 --> 00:04:04,410 ‫They're missing here the image and the prices I guess. 76 00:04:04,410 --> 00:04:07,410 ‫But in principle, it's already working. 77 00:04:07,410 --> 00:04:11,310 ‫So you see here that we now get these console.logs here 78 00:04:11,310 --> 00:04:15,780 ‫for each of the pizzas, exactly what the names we have here. 79 00:04:15,780 --> 00:04:20,310 ‫And so now we are effectively already rendering a list. 80 00:04:20,310 --> 00:04:23,910 ‫So a list based on this pizza data. 81 00:04:23,910 --> 00:04:26,370 ‫Now we could keep going here 82 00:04:26,370 --> 00:04:29,010 ‫and basically add another property now 83 00:04:29,010 --> 00:04:32,460 ‫for the photo name for example. 84 00:04:32,460 --> 00:04:37,460 ‫So we can do pizza.photoname and so on and so forth. 85 00:04:39,300 --> 00:04:41,850 ‫But usually this is not how we do it. 86 00:04:41,850 --> 00:04:45,660 ‫Usually what we do is to pass in the entire object 87 00:04:45,660 --> 00:04:47,880 ‫into the more specific component, 88 00:04:47,880 --> 00:04:49,680 ‫so that's pizza in this case, 89 00:04:49,680 --> 00:04:53,130 ‫and then inside of that component, we would then 90 00:04:53,130 --> 00:04:57,690 ‫take the information that we want out of the object. 91 00:04:57,690 --> 00:05:01,650 ‫So let's now change the way we pass props into this pizza 92 00:05:01,650 --> 00:05:06,650 ‫and simply pass pizza and let's maybe say pizza object 93 00:05:08,280 --> 00:05:11,130 ‫just to make it slightly less confusing 94 00:05:11,130 --> 00:05:12,880 ‫and then or JavaScript mode 95 00:05:13,860 --> 00:05:15,933 ‫and then the current pizza object. 96 00:05:18,000 --> 00:05:20,310 ‫All right and now it all breaks here 97 00:05:20,310 --> 00:05:23,940 ‫because we need to adapt, of course, our pizza. 98 00:05:23,940 --> 00:05:28,067 ‫So now here we have props.pizzaobject.photoname, right? 99 00:05:32,790 --> 00:05:37,790 ‫And so let's paste this here everywhere 100 00:05:38,280 --> 00:05:41,910 ‫and here and here and here. 101 00:05:41,910 --> 00:05:44,460 ‫And a bit later we will make our lives a bit easier 102 00:05:44,460 --> 00:05:46,320 ‫with some additional techniques. 103 00:05:46,320 --> 00:05:48,570 ‫But for now, let's roll with this. 104 00:05:48,570 --> 00:05:50,400 ‫And there you have it. 105 00:05:50,400 --> 00:05:53,250 ‫There you have a list of all the pizzas 106 00:05:53,250 --> 00:05:56,910 ‫based on our pizza data array. 107 00:05:56,910 --> 00:05:58,380 ‫Let's just just get rid of this, 108 00:05:58,380 --> 00:06:02,163 ‫and of course, if we now remove something from here, 109 00:06:03,450 --> 00:06:06,513 ‫then that last pizza over there is going to disappear. 110 00:06:08,130 --> 00:06:13,130 ‫You see but let's put it back and yeah, there it is. 111 00:06:14,820 --> 00:06:18,840 ‫Now notice how we have like an error here in the console. 112 00:06:18,840 --> 00:06:21,990 ‫So let's scroll up a little bit and see what we get. 113 00:06:21,990 --> 00:06:24,750 ‫So we have this warning saying that each child 114 00:06:24,750 --> 00:06:28,080 ‫in a list should have a unique key property. 115 00:06:28,080 --> 00:06:31,020 ‫So basically what this means is that each time we render 116 00:06:31,020 --> 00:06:33,303 ‫a list like this. 117 00:06:34,950 --> 00:06:36,720 ‫Where is it? 118 00:06:36,720 --> 00:06:40,080 ‫Yeah so each time we render a list with the map method, 119 00:06:40,080 --> 00:06:42,510 ‫each of the items that gets rendered 120 00:06:42,510 --> 00:06:45,000 ‫needs a unique key property. 121 00:06:45,000 --> 00:06:50,000 ‫So key is basically a prop that is internal to React, 122 00:06:50,220 --> 00:06:53,910 ‫which it needs in order for some performance optimizations 123 00:06:53,910 --> 00:06:56,760 ‫and for now, it's not really important what that means 124 00:06:56,760 --> 00:07:00,330 ‫as we will learn later what exactly this K property is 125 00:07:00,330 --> 00:07:01,680 ‫and what it does. 126 00:07:01,680 --> 00:07:04,440 ‫For now, what matters is that we pass something here 127 00:07:04,440 --> 00:07:06,723 ‫that is unique to each element. 128 00:07:07,920 --> 00:07:11,520 ‫So to each pizza in this case, and that is the name. 129 00:07:11,520 --> 00:07:15,360 ‫So the name in this example is always unique. 130 00:07:15,360 --> 00:07:18,510 ‫So we can use that one as the unique key 131 00:07:18,510 --> 00:07:20,433 ‫and so then the warning here is gone. 132 00:07:21,570 --> 00:07:25,200 ‫Okay now next, what I want to do is to convert this here 133 00:07:25,200 --> 00:07:30,063 ‫from a simple diff to a UL, so an unordered list. 134 00:07:32,520 --> 00:07:35,790 ‫And then each of these pizzas themselves 135 00:07:35,790 --> 00:07:40,590 ‫should be a list element or list item, so an LI. 136 00:07:40,590 --> 00:07:43,530 ‫So it's very important that we write semantic markup 137 00:07:43,530 --> 00:07:46,560 ‫like this, which many courses somehow overlook 138 00:07:46,560 --> 00:07:48,780 ‫but I believe it's quite important. 139 00:07:48,780 --> 00:07:52,980 ‫And here we are also missing an important class name 140 00:07:52,980 --> 00:07:56,520 ‫to finally apply some more styling here, 141 00:07:56,520 --> 00:07:58,830 ‫which is just pizzas 142 00:07:58,830 --> 00:08:01,830 ‫and so this then puts the pizzas like nicely 143 00:08:01,830 --> 00:08:05,610 ‫in this grid and makes this look even nicer. 144 00:08:05,610 --> 00:08:10,610 ‫So I'm really happy here with this design like this. 145 00:08:10,950 --> 00:08:14,130 ‫And it's already starting to look like very familiar 146 00:08:14,130 --> 00:08:16,586 ‫to what we have here, right. 147 00:08:16,586 --> 00:08:18,510 ‫We have just missing this button. 148 00:08:18,510 --> 00:08:21,270 ‫The text here is a bit different, and we have 149 00:08:21,270 --> 00:08:24,750 ‫some special styling here when the pizza is sold out 150 00:08:24,750 --> 00:08:28,410 ‫and so we will actually talk about this here pretty soon. 151 00:08:28,410 --> 00:08:31,530 ‫But for now, let's quickly review what we did 152 00:08:31,530 --> 00:08:33,240 ‫in this lecture 153 00:08:33,240 --> 00:08:37,140 ‫and so that is fundamentally this part right here. 154 00:08:37,140 --> 00:08:40,500 ‫So the goal was to render one pizza element 155 00:08:40,500 --> 00:08:43,020 ‫for each of the objects that are inside 156 00:08:43,020 --> 00:08:44,640 ‫the pizza data array. 157 00:08:44,640 --> 00:08:47,550 ‫And the way we do that in React is by simply using 158 00:08:47,550 --> 00:08:50,250 ‫the map method on this array, 159 00:08:50,250 --> 00:08:52,170 ‫and in case you're not entirely sure 160 00:08:52,170 --> 00:08:54,660 ‫what the map method does, please go back 161 00:08:54,660 --> 00:08:57,450 ‫to the the previous section where I will introduce you 162 00:08:57,450 --> 00:08:59,580 ‫to all the most important array methods 163 00:08:59,580 --> 00:09:01,410 ‫that we use all the time. 164 00:09:01,410 --> 00:09:04,380 ‫And this one here is probably the most important. 165 00:09:04,380 --> 00:09:06,750 ‫So it will create a new array, 166 00:09:06,750 --> 00:09:09,060 ‫and in this array, in each position, 167 00:09:09,060 --> 00:09:12,510 ‫there will be a new pizza component. 168 00:09:12,510 --> 00:09:15,060 ‫And into each of these pizza components, 169 00:09:15,060 --> 00:09:20,060 ‫we pass as a prop the current pizza object, right. 170 00:09:20,370 --> 00:09:23,610 ‫So we then receive that here as a prop, and from there, 171 00:09:23,610 --> 00:09:25,983 ‫we read all the data that we are interested in. 172 00:09:28,020 --> 00:09:32,340 ‫All right, now of course, we could also not even have 173 00:09:32,340 --> 00:09:33,450 ‫this component. 174 00:09:33,450 --> 00:09:35,733 ‫Let me quickly show that to you as well. 175 00:09:37,110 --> 00:09:38,950 ‫So let's copy this 176 00:09:40,050 --> 00:09:45,050 ‫and well then can simply replace it here, paste that there. 177 00:09:46,020 --> 00:09:50,913 ‫And then of course, we need to get rid of all this. 178 00:09:52,500 --> 00:09:54,990 ‫So I'm just replacing all of them at the same time 179 00:09:54,990 --> 00:09:57,510 ‫and please don't follow this code here. 180 00:09:57,510 --> 00:09:59,340 ‫So you don't need to do this. 181 00:09:59,340 --> 00:10:01,980 ‫I just want to show you that we could have done it also 182 00:10:01,980 --> 00:10:04,953 ‫without like the intermediary component. 183 00:10:05,820 --> 00:10:10,113 ‫So all that matters here is that we return some JSX. 184 00:10:11,431 --> 00:10:13,380 ‫So we can directly write a JSX here 185 00:10:13,380 --> 00:10:16,920 ‫but usually what we do is to place that JSX 186 00:10:16,920 --> 00:10:18,213 ‫in another component. 187 00:10:21,000 --> 00:10:24,273 ‫So let's go back and there we go. 188 00:10:25,200 --> 00:10:27,420 ‫Now, you might have thought maybe that here we use 189 00:10:27,420 --> 00:10:31,140 ‫a for each because it sounds a bit more logical. 190 00:10:31,140 --> 00:10:35,970 ‫Like maybe we wanted to render one pizza for each of these 191 00:10:35,970 --> 00:10:37,470 ‫but that wouldn't really work. 192 00:10:39,900 --> 00:10:43,890 ‫Let's try that and you see that then nothing happened. 193 00:10:43,890 --> 00:10:46,920 ‫And so that's because here inside this UL 194 00:10:46,920 --> 00:10:49,350 ‫we actually need some JSX. 195 00:10:49,350 --> 00:10:54,350 ‫And the only way we get that JSX is by creating a new array. 196 00:10:54,390 --> 00:10:56,160 ‫And so that's what MAP does. 197 00:10:56,160 --> 00:10:59,130 ‫So it creates a new array, which will, in this case, 198 00:10:59,130 --> 00:11:01,890 ‫contain these six pizzas. 199 00:11:01,890 --> 00:11:04,560 ‫And so then here we will have this array 200 00:11:04,560 --> 00:11:07,260 ‫with all these pizzas and then React knows 201 00:11:07,260 --> 00:11:08,343 ‫how to render that. 202 00:11:10,530 --> 00:11:13,110 ‫Okay, so very, very important technique. 203 00:11:13,110 --> 00:11:15,120 ‫Make sure that you memorize this 204 00:11:15,120 --> 00:11:17,970 ‫or if you don't want to memorize, don't worry, 205 00:11:17,970 --> 00:11:20,520 ‫because you will do this dozens of time 206 00:11:20,520 --> 00:11:21,663 ‫throughout the course.