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.

<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>

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

Move the data into an array

 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",
 ];

Map the people members into a new array of JSX nodes, listItems

 const listItems = people.map((person) => <li>{person}</li>);

Return listItems from your component wrapped in a <ul>

📝Note: We can directly use map inside <ul> tag to render the list without declaring a listItems variable.

const App = () => {
    return (
        <div className="App">
            <ul>{people.map((person) => <li>{person}</li>)}</ul>
        </div>
    );
};

export default App;

Keeping list items in order with `key`

Notice the browser console displays a console warning for the above method

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.

📝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.

Now let’s make an array named people containing details of every person

 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 to Card component

 {people.map((person) =>
         <Card
             key={person.id}
             img={person.img}
             name={person.name}
             work={person.work}
             hobby={person.hobby}
             origin={person.origin}
         />
 )}

In this way, we don’t have to pass 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.

Rendering Lists In ReactJs Explained: A Comprehensive Overview

Comments (7)

React

A Practical Approach to Conditional Rendering in React

More from this blog

A Practical Approach to Conditional Rendering in React

What are React Props? and How to Use Them for Dynamic Data Output?

Setting up the Hacking Environment: Installing Kali Linux on VirtualBox

Understanding Different Data Types: A Comprehensive Guide

Rendering Lists

Rendering data from arrays

Keeping list items in order with `key`

Example

Command Palette

Comments (7)

React

A Practical Approach to Conditional Rendering in React

More from this blog

Rendering Lists

Rendering data from arrays

Keeping list items in order with key

Example

Keeping list items in order with `key`