React: Introduction to Rendering Lists. My name is Farish Kashefinejad. I am the software development domain lead at Cloud Academy. If you have any questions or concerns about this course, please feel free to reach out to support. On the screen, I have the App.jsx file open. I will import a list component here and render a list of usernames. The source of that list of usernames comes from this data file that I'm currently importing. Going over to the data file, there's an array named users which contains 10 objects. Each object has two properties, a username and a unique ID. Next to the list component, the list component currently has a heading of user list. 

It also imports a list item component which is currently below the user list heading. Going to the list item component, inside of this component is a list item with a placeholder text. Now that we're done with this tour of the setup, going back to the App.jsx file, I will begin by importing the list, then adding the list below the h1 element. While I'm making code changes, you may see some errors pop up while typing. This has to do with autosave saving before I complete the code. After the users import statement, I will type import list from the relative path of the list component. Inside of the app function below the Cloud Academy heading, I will use the list component. As a reminder, components look like HTML elements. Now to the right, user list and list items are being displayed. Now at the moment this text is just placeholder text and I need to use the users data to generate this list. I need to change this component in order to pass through the username data from the data.js file. 

I will do so by creating a prop. To create this prop I will add a users attribute to the list component and set it equal to users. Users is coming from the data import statement. Now this completes the code needed in the App.jsx file. Now going to the list component, in order to access the props as a parameter for the list component function. Now inside of the parentheses I could just type props, but I also can give a little clarity to what my props actually are by using some destructuring here. I will delete props and add curly braces to destructure users from the props object. Now on a small scale this isn't really necessary because there's only one props property which is users. But on a larger scale, when you have multiple properties to your props object, this makes it much easier to know which of the props properties you are working with. Now this component has access to the array of users and I can use this array to generate a list of usernames. To do so, I need to use a JSX expression. I will replace the list item component with curly braces. Inside of the curly braces I need to iterate over the user's data. I could use a for loop, but I could also map through the array and return the list item component. Inside the curly braces I will type users.map, passing in an argument of user which is to represent each user object to an arrow function. 

And for now that arrow will return a list item component. Now to the right is the list item component repeating 10 times, each one for each user in the users array. Now in order to display the username, I need to create another prop to transfer this data to the list item component. I will name the prop user and give it a value of user.username. Now, this process of passing data from one nested component to another is known as prop drilling. Now, the list item component needs to access this prop, going to the list item file, using destructuring when I pass the user prop as the argument for the list item function. I will replace the list item placeholder text with a JSX expression passing in the user prop. Now to the right is a list of usernames. Now, this does work, but there is also a hidden problem that happens whenever you're generating lists of data in React. Opening up the developer console on the right, there's a specific error that I will focus on. Warning: each child in a list should have a unique "key" prop. 

When iterating over arrays to generate lists in React, for performance reasons React prefers that each element has a key prop with a unique value. I will use the unique ID for each user for this prop. Closing out the console and returning back to the list component, inside of the JSX where the list item is being returned through the use of the map method, I'm going to simply add a new prop called key and set it equal to the user ID. Since the user ID is unique for each user, this satisfies React's requirement that each list item has a unique key prop. And that's it. This is how we can render lists in React. Thanks for watching at Cloud Academy.