Learn React #5: Maps and Loops in JSX

hey everyone in this video we are going to be going over the logic of mapping and for eaching through things in react code now i did this in the props video and i sort of very briefly touched on it but it's a concept that is fundamental to react and you will be using a lot so i just wanted to make its own video that way you guys get the utmost understanding of it and you have no questions about it moving forward from this point in my series now as you can see here just like the last video the destructuring video i have just a basic code sandbox.io setup with react we don't need anything too fancy we don't need to run our own create react app just to illustrate what we are doing here we're just gonna use a basic code sandbox sandbox and show you guys some examples of how things work now before i get further into this video i just want to say i love interacting with you guys thank you so much for all the comments and the feedback as you can see the font size is a lot bigger than the last couple of videos um because i know that's something a lot of you guys asked for and if you find out in these videos please consider leaving that comment anything you want to see in the future let me know it really helps with the youtube algorithm like the video subscribe turn notifications on so every time i release one of these you can jump on it as soon as possible i love interacting with everyone and i can't thank you enough and it helps so much with the algorithm so with that out of the way let's just get started so the first thing i'm going to do here is create an array of data now mapping is pretty much you're going to use it when you have a lot of data and you want to display a component for this simple use case um we are just going to use you know some text and display text dynamically on our screen in the props example as you saw we were displaying entire objects and stuff like that and we will get to that so first of all let's go ahead and create like you know let's say employ a list uh an array of employee names so employees equals and let's just you know have like anthony and maybe like kevin and then you know maybe like stephanie and then you know uh maybe one more and let's call him like george or something um so you can see we have an array of employees and let's say we just wanted to display each employee one by one well when i was new to react i didn't know any better so the way i did it was for the first employee you know i would display the first employee in the list just by referencing it the same way we would reference the first item in a list in any programming language and then i would have another one of these for every single employee so you can see in the first place i'm displaying an h1 tags with the first employee the zeroth employee in the array then i'm repeating that for all four employees until we are displaying it now when you're first learning react it can be tempting to do things like that but if you're thinking about it in a best practices point of view or the point of view where i'm gonna get an employee list from you know an actual backend data source and it's going to be a lot more than four and there's no way let's say if a company has 500 employees there's no way i'm going to repeat this 500 times well that's when you get to the point where you need to use simple mapping and simple lists so um first of all let's talk about the difference in javascript between mapping and for eaching if i were to for each through this so let's say you know employees dot four each and you know a simple for each will have you know the variable that you want to for each through so let's call this like an employee and then um over here we can put our little squiggly braces or sorry um yeah well we could put our little squiggly braces and we can say you know return and then here just put like h1 tags with the employee and then end the h1 tags and we can see here when we say that it's actually not going to um it's actually not going to display anything the reason for this is before each um the actual for each method the difference between for each and map is your map will implicitly automatically return an array of the results inside of it whereas a for each won't which is why if we were to straight up just replace this with map you'll see all of a sudden it works oh let me just uh put my squiggly tags around it that way we're actually displaying the employee name and just so you guys don't get confused even um if we switch it back to four each with those squiggly braces it still won't work um and the reason for that is like i said when you map through something in javascript the map operator will actually return an array of whatever was returned inside of it so in this case what is actually happening is this map is going to return an array of html nodes and each one of them is going to be an h1 tag with the employee name inside of it with the closing tag for that h1 and this is probably the simplest application of the map function and looping that there is in react now there's a little short cool little shorthand i want to show you guys that you might see elsewhere and i don't want you guys to be um you know like what what the heck is this this isn't what i'm used to when it comes to mapping and what it is is as you can see here this whole function is just all we're doing in the function is just returning if you have functions where the only thing you are doing in that function is returning you can actually instead of you know having squiggly braces and then typing return and then what you are returning you can simplify this by just instead of having squiggly braces having circular braces so parentheses and then get getting rid of the return that you have in there um and you oh it looks like i missed i accidentally deleted another one so as you can see here this function is going to just link to um a straight up html node and you can see and this is for arrow functions in general if you just have an arrow function that has a circle brace instead of a squiggly brace everything you put inside of there will pretty much just be what you are actually returning and this is pretty common in javascript you'll see people depending on how in-depth you have to go into the function interchange between the two methods now let's get a bit more complex let's say for example all of a sudden instead of just having an array of strings for each employee i want to display more than just one thing each employee is actually an object now let's go ahead and delete what we have here and make an object so you know let's say in this object the name of the employee will be we're going to have the name and let's say like the id of the employee so let's say the name and id for this employee is anthony and abc well now this isn't simply going to work because this is no longer just a string that we can simply output this is an entire object let's go ahead and make objects for the rest of the people in our uh employee list really quickly so let's just do three just to keep it a bit simple and clean let's have george and stephanie let's make george's you know uh like uh cba or something and then stephanie's employee like sde i don't know something random now if we wanted to display the names for each employee we can just simply refer to it by employee.name for example and you can see we have all the employee names now comes to the cool part you can actually nest entire components um and you know big lists inside of uh this employee map that we are returning here so let's start for example we can wrap all our h1 things in divs and then what we can do is we can um you know have not only the employee name but also the employee id in here and let's make you know this a bit smaller let's make all these h6s so they sort of group together a bit better you can see anthony abc or cba but let's really to top it all off use combine this with string interpolation so i can go ahead for example put my backticks and then say name and then wrap this around and then you know id and then you know put employee dot id and refer to it like that so now for every single employee in this list we are going to be displaying this div with this h6 tag and all um whatever we want to display inside of it for every single employee and that is known as sort of mapping through things in javascript now let's say i wanted to you know let's say you just came from my last video and you're like oh man i don't want to use employee.name i want to do destructuring well if you want to do stuff outside of the return you would could switch instead of having that circley braces let's switch it back to the squiggly braces let's wrap all our jsx inside of a return and now in here we can treat everything above this return in between the squiggly brace as a regular javascript function so and to be honest a regular component i can go ahead and you know type you know const let's destructure the name and the id from the actual employee object and now in here instead of doing employee.name i can just do name and i can just put id and you'll see that it works just the same now all of this logic that i have in here what you should be doing ideally you don't want to have too much logic for best practices um you would want to put this in its own component and map through it like that so let's go ahead and i illustrated this in the props um video but just for a quick refresher let's go ahead let's make the employee.jsx you know thing let's import let's make a basic component so we're going to import react from react we're going to type export or sorry const and then the actual name of the thing um oops the actual name of our component and let's export default employee now we can just simply move all of this stuff just like that pop that in here and now we can just take props we will be getting these variables from props like we saw in the previous video and now all i have to do is i can remove these squiggly braces and just in here let's import our employee really quick import employee from dot slash employee we're import we're importing the component that we just created now we're just gonna you know pass in the component we can say name equals employee dot name and then uh the id equals employee.id and let's go ahead and close these tags and there you go now we are mapping through our own custom component and we can do this and and the good part about this is if you have a lot of data this is being dynamically done so you don't have to worry about for every employee copying and pasting a new employee tag this is the way that you should be doing it um and the last thing i want to talk about here is what you want is sorry my cats are going nuts in the background but what you can also do here is when you do a map a lot of the times the react will sort of yell at you because if we go ahead and let's refresh this is there any way to here we go console is clear now let's go ahead and refresh this so you will see when you are using maps um you will get an error or a warning in react saying that each child and a list should have a unique key prop and what this essentially means is the top level thing for your map must have a unique identifier for react and a lot of the times you know you you know in our data we have an id and it's sort of you know we can sort of assume that the id for each employee will be the same we're not going to get an employee with the same id as another employee so to get rid of this you can just go ahead and assign a key and make that key equal to you know employee.id for example and you'll see here if i were to clear the console and refresh it we won't get that annoying error anymore and this has to be on the top level of whatever you are returning so let's say for example if i instead if i wrapped our employee object in a div so let's go ahead and just wrap it in some div components you'll see here um if i were to clear the console and refresh this i still get that error it is because it wants the key to be at the top level of um the top level component of wherever you are displaying it so now if i were to clear the console and go ahead and refresh this you'll see um it goes away and that is pretty much the gist of you know basic looping uh when it comes to mapping in uh react you will see this on in a lot of applications you will use this in a lot of applications and in the projects we are going to do later on in this course you will see that this right here is a absolutely um plays an absolutely pivotal role when it comes to react development so if you found value in this video i would love it if you left a comment or like the video subscribe turn notifications on for the next videos helps with the algorithm so much and i will see you guys in the next video

Channel: Anthony Sistilli

Views: 15,412

Keywords: React Material UI, React Material UI Tutorial, React MUI, MUI, React, Tutorial, Material UI, react tutorial, react tutorial for beginners, reactjs tutorial for beginners, react basics, React looping, React mapping, react js map function, react js map, react map object, react map component, react map key, react map, react map json, react js foreach, react foreach loop, react component ma, react loop through array of objects, react loop components, react list loop

Id: 5llXA0RTYIU

Length: 13min 55sec (835 seconds)

Published: Sun Sep 27 2020