ReactJS Tutorial - 17 - List Rendering

when you build web applications a common scenario is to display a list of items for example a list of names a list of products a list of courses and so on so what we want is to repeat some HTML for each item in the list in this video let's see how to do that in react one of the best things about react is that it relies heavily on the JavaScript language itself and not introduce new methods to manipulate and render data if you are an expert in JavaScript you probably know that we can use the Mac method to quickly iterate over an array and return a new array with the desired changes applied if you are not aware of the map method let me quickly show you how it works I'm here at the mdn dots for re dot prototype dot map method you can see that the map method creates a new array with the results of calling a provided function on every element in the calling array so in the example in line 1 we have an array of numbers in line 4 we call the map method on the array the map method accepts a function as an argument and of course what you see here is an arrow function there is one parameter called X and in the function body we return X x to the entire operation is then assigned to a variable called map 1 which is then log to the console in line 6 if I run this code you can see the expected output so what the map method does is go over each element in the array and apply a transformation specified in the function body in our example we have an array of four numbers so the transformation function is executed once for each of the four numbers on first execution the parameter X will contain a value of 1 it is transformed to 1 multiplied by 2 which is 2 which you can see here in the output second execution we have X is equal to 4 which is transformed to 4 into 2 which is 8 and similarly 9 into 2 which is 18 and 16 into 2 which is 32 so we have a list of numbers and we are able to return a list of numbers after applying some transformation using the map method this is pretty much the concept behind list rendering in react the only difference is instead of a transformation like multiplication we will be transforming into JSX let's understand how that works with a simple example back in vs code I am going to create a new file called name list dot J s within the file I am going to use the react snippet RFC II to create a new functional component within the component I am going to create an array of names Bruce Clark and Diana and in the return statement I will add an h2 tag to display each name using the array index names of zero names of 1 and names of two back in app component I will include the name list component make sure to import it at the top now if I say both the files and take a look at the browser you should be able to see the list of names although this works fine we know that this really is not a proper solution so let's see how to use the map method to render the list of names I'm going to go back to vs code and in nameless component let me remove the h2 elements and instead begin with curly braces remember the map method is JavaScript code which needs to be evaluated in curly braces at the way to do that in JSX so within curly braces array dot map is the syntax so names dot map the map method takes in a function as an argument we will be using an arrow function the syntax is parameter followed by the fat arrow followed by the function body the parameter I am going to call it as name instead of X you can name it anything you want to but I recommend naming it something relevant to your code now the fat arrow symbol followed by the function body which will be the transformation what we want is for every name return and each to tag with the name as the inner HTML so it's the tag with the name as the inner HTML now once you start writing HTML you need to reuse curly braces if you have to evaluate the JavaScript expression so even though we do already have a pair of outer curly braces we need another pair for the name parameter and that is pretty much it if we now save the file and take a look at the browser you should still be able to see the list of names rendered correctly one change you can do though if you wish to dennis is keeping the return statement simple by moving out the list rendering logic so I'm going to declare a new constant Const name list and assign the result of the map operation then in the return statement I will simply include the name list in the JSX so within curly braces name list now when I format the code you can see that it becomes much more concise just a personal preference which you can follow as well if you want to the other thing is how simple are JSX is right now typically you're going to have a list of objects with a few properties that have to be rendered in such cases it is always a good idea to refactor the JSX into a separate component and then use the component in the map method JSX that sounded more complicated than it should be so let me help you understand with an example I am going to replace the names array with an array of persons so for each person in the list we now need to render the name age and also their skill we could simply render them in the map method with additional HTML let's start with that change name list to person list names dot map to person's dot map and name the person in the JSX we are going to have I am person dot name I am person dot age years old I know person dot skill because person represents the object in the list to access the properties we need the dot operator it's a person dot named person dot H and person dot skill finally change name list to person list in the return statement save the file and take a look at the browser and it works as expected again there is nothing wrong with the code but the recommended way is to refactor the JSX into a separate component and that is really simple I'm going to create a new file called person dot J s within the file use the snippet are FCE to create a functional component remove the JSX from the list component and include it in person yes so the h2 tag I'm going to remove it from person list and include it in person dot GS but how does this component know what the person data is it doesn't right now so let's pass the data down as props from the list component so in the list component map method include the person component in passing the person as a prop so after formatting we have person list is equal to persons dot map person as a parameter which is passed as the prop to the person component finally in the person component we can restructure the prop right in the parameter so curly braces person if you now save the files and take a look at the browser you should still see the same output but this time we are writing better code the list component is only responsible for rendering the list and the person component is only responsible for rendering the person HTML and let me tell you this is also the pattern you commonly see when building applications that render lists of data all right we are able to render a list of items in the browser without any problem at least that's what we think if I open the console we see the dreadful red text we have a warning in the console each child in an array or iterator should have a unique key prop what exactly is this unique key prop and what does this warning really mean let's understand that in the next video thank you guys for watching Jennifer to subscribe I'll see you guys in the next one

Channel: Codevolution

Views: 272,037

Keywords: Codevolution, React, React Tutorial, React Tutorial for Beginners, React Basics, React Fundamentals, Reactjs, Reactjs Tutorial, Reactjs Tutorial for Beginners, React.js, React js, List, List Rendering, map, map operator

Id: 5s8Ol9uw-yM

Length: 11min 56sec (716 seconds)

Published: Mon Dec 10 2018