Complete React Tutorial (& Redux) #14 - Outputting Lists

Key Takeaways

all right they're ninjas so so far when we're nesting this ninjas component down here for each one we're only outputting one individual ninja to the dot so we're passing the props of that ninja down to that component but instead it would be good if we could pass a list of ninjas down into this one component then inside that component we receive that list of ninjas cycle through them and output each ninja in this component so let's try doing that now since we're passing a list of ninjas down into one of these components we don't need to output them twice because they're all going to be going into the same single component and instead of defining that list as props on the component directly what I'll do is define that data up here in the States so we'll create a state's object and then we'll pass that property of the state down into this component so I'm going to create a property called ninjas and this is going to be an array now I'm just gonna paste this array of objects in right here so there's three objects each one has a name it has an age of belt color and an ID property and we'll come to that ID property and why I've had it later on but for now just worry about we have a name and age and a belt for each different ninja inside this array so each array item is an object okay so the idea is is that we're going to pass this array down into this component we're going to receive that array as a prop right here we're going to cycle through it and output some HTML for each individual ninja so then first of all let's pass this array through into this component as a prop so we'll call this prop ninjas like so and set that equal to this state dot ninjas so all we're doing is referencing this array right here and passing it down as a prop so now inside this component over here we will have access to that ninjas array so let's just grab that first of all I'm going to say cons ninjas is equal to this props and by the way this is just like saying Const ninjas is equal to this props dot names right it's the same thing it's just that we're using destructor in to do it so anyway we've grabbed that means property now off this props object so we have that array stored in here and now we want to output it to dot we want to cycle through those ninjas and output some HTML for each individual one which looks like this so how are we going to do that exactly well the way we're going to do it is by using the JavaScript method called map and what the map method does in JavaScript is taken array and it maps that array to a new array and that's what we want to do right we want to take this array and we want to map it to a new array which will be an array of HTML elements one for each ninja so we're going to return some kind of small template like this for each individual ninja in this array and we're going to store all of those snippets in a new array then we can output that array of code right here in the template so let's do this up here just below where we grab the ninjas will create a new constant and we'll call this ninja list so this ninja list right here this is ultimately what we want to store our new array full of HTML elements inside so we'll set that equal to ninjas which is the original array dots map and inside we take each individual ninja as we cycle through it and this is an arrow function right here and we perform a function on that individual ninja now we return a value inside this function right here and this return value is the element which is popped into the new array so right here so what we want to do is return some JSX code some HTML for each individual ninja and that is going to be the template from that individual ninja now that template is going to look very much like this thing down here so let's grab that and paste it up here all right so let's scoot that in so now then what we're doing is cycling through our ninjas array we're mapping it to a new array and for each ninja inside this array what we're doing is returning a bit of template for that ninja so now our new array is going to like an array of these things right here one set of JSX for each individual ninja alright so what we want to do is instead of referencing just name age and belt we need to reference ninja name because this is the item that we're cycling through each time around so we get that individual ninja each time so we can say Ninja Dame ninja age and ninja belt alright so that's pretty cool we're returning this JSX and we're storing that JSX for each ninja inside this array now so all we need to do is output that array down here so first of all let's create a div with a class of ninja - list like so and inside that div all I'm gonna do is output this array because that's going to be the list of elements so let's output that in our curly braces since this is dynamic content we're output it so ninja list which is just a variable name right here which is storing the array of this stuff for outputting that and react and JSX is going to know that we want to output this sequentially so for each ninja that's stored in this array now we want to output this template code and it's going to do that for us so let's save this and head over to the browser okay and now we seek for each ninja we get that template code we've mapped through those created the new array where each element inside that array is that snippet of JSX for each ninja and we've output each one when we output that array right here now this is almost on but if we go to the console we should get some kind of warning or error and you can see this error right here each child in an array or iterator should have a unique key prop so what it's saying is each one of these here this should have a unique key identify this surrounding element right here and that is so react can identify which ninja this is because if you think about it when we change this data over here react is going to update the template and recycle through the list so determine which ninja was removed and so therefore it can remove it or add it to the Dom so what it's saying is for each ninja when we have this template I want you to give the surrounding element right here a unique key that is specific to that ninja so if you delete that from the state at some point in the future then I know which one to delete from the list right here and it can do that efficiently then it can perform that manipulation of the Dom very efficiently if we give this a unique key so to do that that's simple all we do is say key is equal to something and this something has to be unique for that ninja so that's something is going to be this ID so you can see here each one has a different ID so all we need to do is pass that unique ID into this key field so ninja dot key like so and now the first one is going to have an ID of one the second one - the third one three etc so let's save that and view this in a browser and we still don't have a unique key so let's just go back and that's because stupidly I said ninja key and hot ninja ID which is actually the property named ninja ID so let's save that again and view it in a browser and now we don't get that warning over here so that's all fine err okay so that's how we can cycle through data we get the original array which is here ninjas we can map through that array we receive the individual ninja which represents each individual item in that array then we perform a function for each individual ninja inside that function we return a bit of JSX which we want to output for each individual ninja so it's cycles through those stores that JSX in a new array called ninja list over here then finally we output that ninja list down here and it outputs that whole list of JSX for us so that we got a pretty simple right that's how we loop through data and output it in react