# Rendering Lists In ReactJs Explained: A Comprehensive Overview

# **Rendering Lists**

We will often want to display multiple similar components from a collection of data. In React, we will render lists with some type of loop. On this page, we’ll `map()` with React to filter and transform our array of data into an array of components.

## **Rendering data from arrays**

Let’s say that you have a list of people.

```xml
<ul>
	<li>Blake  : Designer who loves to paint</li>
	<li>Sofia : Blogger who cooks delicious</li>
	<li>Diksha: Student and a dancer</li>
	<li>Bruce : Front End Developer</li>
	<li>kelly : Teacher at High School</li>
</ul>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480453613/2dd5787d-d134-4ce2-8a70-dca804010ef6.png align="left")

Here’s how we can generate a list of items from an array:

1. **Move** the data into an array
    
    ```jsx
    const people = [
    	"Blake  : Designer who loves to paint",
    	"Sofia : Blogger who cooks delicious",
    	"Diksha: Student and a dancer",
    	"Bruce : Front End Developer",
    	"Kelly : Teacher at High School",
    ];
    ```
    
2. **Map** the `people` members into a new array of JSX nodes, `listItems`
    
    ```jsx
    const listItems = people.map((person) => <li>{person}</li>);
    ```
    
3. **Return** `listItems` from your component wrapped in a `<ul>`
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480466359/376318ca-975c-4b6f-99ca-a2d95da78599.png align="left")
    
    > **📝Note:** We can directly use map inside `<ul>` tag to render the list without declaring a `listItems` variable.
    > 
    > ---
    > 
    > ```jsx
    > const App = () => {
    > 	return (
    > 		<div className="App">
    > 			<ul>{people.map((person) => <li>{person}</li>)}</ul>
    > 		</div>
    > 	);
    > };
    > 
    > export default App;
    > ```
    > 
    > ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480478549/17fc4dfa-01b5-41c0-bd85-db7ecd0e1cea.png align="left")
    
    ### **Keeping list items in order with** `key`
    
    Notice the browser console displays a console warning for the above method
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480534588/c249d271-a30b-4388-932c-d6e619b4c172.png align="left")
    
    Keys help React to identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. We can pass index to the key.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480543499/171093b2-0f02-41a1-80e5-05f8e3a991a2.png align="left")
    
    > **📝Note:** JSX elements directly inside a `map()` call always need keys!
    
    ## Example
    
    Let’s how can we utilize it and how useful it is.
    
    Consider this example in which we show information about different people using cards.
    
    We render every person’s `name`, `image`, `work`, `hobby` and `country origin` by passing props to `Card.jsx` component.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480583965/14b0e497-ff50-490a-b215-87def90b9146.png align="left")
    
    Now let’s make an array named `people` containing details of every person
    
    ```jsx
    const people = [
    	{
    		'id': 1,
    		'img': '<https://images.pexels.com/photos/1878687/pexels-photo-1878687.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load>',
    		'name': 'Blake',
    		'work': 'Designer',
    		'hobby': 'Painting',
    		'origin': 'Norway'
    	},
    	{
    		'id': 2,
    		'img': '<https://images.pexels.com/photos/1130623/pexels-photo-1130623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2>',
    		'name': 'Sofia',
    		'work': 'Blogger',
    		'hobby': 'Cooking',
    		'origin': 'Brazil'
    	},
    	{
    		'id': 3,
    		'img': '<https://images.pexels.com/photos/1028927/pexels-photo-1028927.jpeg?auto=compress&cs=tinysrgb&w=600>',
    		'name': 'Diksha',
    		'work': 'Student',
    		'hobby': 'Dancing',
    		'origin': 'India'
    	},
    	{
    		'id': 4,
    		'img': '<https://images.pexels.com/photos/769690/pexels-photo-769690.jpeg>',
    		'name': 'Bruce',
    		'work': 'Writer',
    		'hobby': 'Reading',
    		'origin': 'England'
    	},
    	{
    		'id': 5,
    		'img': '<https://images.pexels.com/photos/2811087/pexels-photo-2811087.jpeg?auto=compress&cs=tinysrgb&w=600>',
    		'name': 'Kelly',
    		'work': 'Actor',
    		'hobby': 'Writing',
    		'origin': 'France'
    	},
    ];
    ```
    
    And map the `people` array for every `person` and pass [props](https://blog.sahilchandravanshi.com/react-props) to `Card` component
    
    ```jsx
    {people.map((person) =>
    		<Card
    			key={person.id}
    			img={person.img}
    			name={person.name}
    			work={person.work}
    			hobby={person.hobby}
    			origin={person.origin}
    		/>
    )}
    ```
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683480602826/85650c73-7f48-445d-a8fc-4400f8d4529e.png align="left")
    
    In this way, we don’t have to pass [props](https://blog.sahilchandravanshi.com/react-props) for every person as `map()` makes our day better.
    
    Here, you can see that we used `id` as `key`. Why? If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.