‫Rendering lists is one of the most common things
‫that we do in basically all React applications.
‫You will probably do it like 100 times
‫throughout this course
‫and so let's now learn how to render lists in React.
‫But first of all, what do we actually mean
‫by rendering lists?
‫Well, basically rendering a list is when we have an array
‫and we want to create one component
‫for each element of the array.
‫So for example, here we have all starter data, remember?
‫So here we have an array of these objects
‫where each object is one pizza.
‫And so as you can imagine,
‫now we want to basically render this list.
‫So basically we want to take this array,
‫and for each of these pizza objects,
‫we want to automatically create one pizza component here
‫in our user interface.
‫So instead of calling or of using here
‫the pizza component manually one by one,
‫we want to do it all at once dynamically.
‫So if we have like four pizzas in the array,
‫then we want four components to be rendered.
‫But if we have like six or 10,
‫then we want 10 components to show up here in our app.
‫Okay, so let's now learn how to do this.
‫Now, the beauty of React is that for many things,
‫all we need really is the JavaScript knowledge
‫that we already have.
‫So for example, for rendering lists,
‫there's nothing new about React that we need to learn.
‫So it doesn't give us like a list element that we can use
‫or something like this.
‫All we need is the JavaScript knowledge
‫that we already have.
‫And in this case, all we need is the map method.
‫So let me show you how after all this talk.
‫So let's create a new diff here
‫and later we will convert this to an actual list element
‫but let's just start out with any element here.
‫It doesn't really matter which one.
‫And for starters, let's also comment out this code
‫right here and maybe you noticed here by the way,
‫that a comment in JSX is simply again
‫entering JavaScript mode so with these curly braces
‫and then this is just a JavaScript comment.
‫So this is one of the rules of JSX that was actually
‫in one of the slides
‫or actually in the only slide in the previous lecture.
‫So if you read that, then you're already familiar with this.
‫But anyway, let's now render our pizza list.
‫Let's remember, yeah, it's called pizza data.
‫So let's enter JavaScript mode here
‫and then let's take our pizza data,
‫which remember is just an array.
‫And then let's map over it.
‫So at map, we basically loop over this array
‫and create a brand new array.
‫So in this pizza data, each element is a pizza.
‫So let's do this and what we want in this new array,
‫so in the new array that will be the result of map
‫is for each pizza, a pizza component.
‫And now we can simply pass all of these props
‫in dynamically here.
‫Let's first close it like this.
‫So we can now say pizza. and I think it is name,
‫but let's check.
‫Yeah, so we have name, ingredients, price, photo data
‫and even this other property.
‫So if I give it a save right now,
‫we should already see the six components over there
‫and indeed, beautiful.
‫There they are.
‫They're missing here the image and the prices I guess.
‫But in principle, it's already working.
‫So you see here that we now get these console.logs here
‫for each of the pizzas, exactly what the names we have here.
‫And so now we are effectively already rendering a list.
‫So a list based on this pizza data.
‫Now we could keep going here
‫and basically add another property now
‫for the photo name for example.
‫So we can do pizza.photoname and so on and so forth.
‫But usually this is not how we do it.
‫Usually what we do is to pass in the entire object
‫into the more specific component,
‫so that's pizza in this case,
‫and then inside of that component, we would then
‫take the information that we want out of the object.
‫So let's now change the way we pass props into this pizza
‫and simply pass pizza and let's maybe say pizza object
‫just to make it slightly less confusing
‫and then or JavaScript mode
‫and then the current pizza object.
‫All right and now it all breaks here
‫because we need to adapt, of course, our pizza.
‫So now here we have props.pizzaobject.photoname, right?
‫And so let's paste this here everywhere
‫and here and here and here.
‫And a bit later we will make our lives a bit easier
‫with some additional techniques.
‫But for now, let's roll with this.
‫And there you have it.
‫There you have a list of all the pizzas
‫based on our pizza data array.
‫Let's just just get rid of this,
‫and of course, if we now remove something from here,
‫then that last pizza over there is going to disappear.
‫You see but let's put it back and yeah, there it is.
‫Now notice how we have like an error here in the console.
‫So let's scroll up a little bit and see what we get.
‫So we have this warning saying that each child
‫in a list should have a unique key property.
‫So basically what this means is that each time we render
‫a list like this.
‫Where is it?
‫Yeah so each time we render a list with the map method,
‫each of the items that gets rendered
‫needs a unique key property.
‫So key is basically a prop that is internal to React,
‫which it needs in order for some performance optimizations
‫and for now, it's not really important what that means
‫as we will learn later what exactly this K property is
‫and what it does.
‫For now, what matters is that we pass something here
‫that is unique to each element.
‫So to each pizza in this case, and that is the name.
‫So the name in this example is always unique.
‫So we can use that one as the unique key
‫and so then the warning here is gone.
‫Okay now next, what I want to do is to convert this here
‫from a simple diff to a UL, so an unordered list.
‫And then each of these pizzas themselves
‫should be a list element or list item, so an LI.
‫So it's very important that we write semantic markup
‫like this, which many courses somehow overlook
‫but I believe it's quite important.
‫And here we are also missing an important class name
‫to finally apply some more styling here,
‫which is just pizzas
‫and so this then puts the pizzas like nicely
‫in this grid and makes this look even nicer.
‫So I'm really happy here with this design like this.
‫And it's already starting to look like very familiar
‫to what we have here, right.
‫We have just missing this button.
‫The text here is a bit different, and we have
‫some special styling here when the pizza is sold out
‫and so we will actually talk about this here pretty soon.
‫But for now, let's quickly review what we did
‫in this lecture
‫and so that is fundamentally this part right here.
‫So the goal was to render one pizza element
‫for each of the objects that are inside
‫the pizza data array.
‫And the way we do that in React is by simply using
‫the map method on this array,
‫and in case you're not entirely sure
‫what the map method does, please go back
‫to the the previous section where I will introduce you
‫to all the most important array methods
‫that we use all the time.
‫And this one here is probably the most important.
‫So it will create a new array,
‫and in this array, in each position,
‫there will be a new pizza component.
‫And into each of these pizza components,
‫we pass as a prop the current pizza object, right.
‫So we then receive that here as a prop, and from there,
‫we read all the data that we are interested in.
‫All right, now of course, we could also not even have
‫this component.
‫Let me quickly show that to you as well.
‫So let's copy this
‫and well then can simply replace it here, paste that there.
‫And then of course, we need to get rid of all this.
‫So I'm just replacing all of them at the same time
‫and please don't follow this code here.
‫So you don't need to do this.
‫I just want to show you that we could have done it also
‫without like the intermediary component.
‫So all that matters here is that we return some JSX.
‫So we can directly write a JSX here
‫but usually what we do is to place that JSX
‫in another component.
‫So let's go back and there we go.
‫Now, you might have thought maybe that here we use
‫a for each because it sounds a bit more logical.
‫Like maybe we wanted to render one pizza for each of these
‫but that wouldn't really work.
‫Let's try that and you see that then nothing happened.
‫And so that's because here inside this UL
‫we actually need some JSX.
‫And the only way we get that JSX is by creating a new array.
‫And so that's what MAP does.
‫So it creates a new array, which will, in this case,
‫contain these six pizzas.
‫And so then here we will have this array
‫with all these pizzas and then React knows
‫how to render that.
‫Okay, so very, very important technique.
‫Make sure that you memorize this
‫or if you don't want to memorize, don't worry,
‫because you will do this dozens of time
‫throughout the course.