React List Example-Display List In React Tutorial

Hi Friends!

You must be wondering how to display a list of items on the browser screen while developing the React applications. We will learn in this tutorial how to show a simple list item, a list of objects, nesting lists in react. In addition, we will get knowledge about updating the state of the React list.

It should be kept in mind that in order to show the lists, we will have to learn JavaScript’s Array.map() method. This method takes data transform to list view.

 

React List Example-Display List In React Tutorial

The following steps will help in learning the display of a list in React App.

Step 1- Simple React List Example

In this very first step, suppose, we have an array of fruits. We want to display the list of the fruits in React app. The below code will be used to render the items of the list using .map() method.

import React from 'react';

function App() {
  const Fruits = [
    { name: 'Apple' },
    { name: 'Apricot' },
    { name: 'Honeyberry' },
    { name: 'Papaya' },
    { name: 'Jambul' },
    { name: 'Plum' },
    { name: 'Lemon' },
    { name: 'Pomelo' }
  ];

  return (
    <div>
      {Fruits.map(data => (
        <p>{data.name}</p>
      ))}
    </div>
  );
}

export default App;

 

Step 2- Render A List In React With Key

In the below-given React List example, we will render a list of items that contain movie names and their respective ids. For fetching the items from the Movies array, we will again use .map() method. Every item has a unique key property.

The keys are used in React to figure out how to update a list- be it adding, deleting, or updating an item in the list.

We have provided a unique id to every item in the list since React uses a virtual DOM and depends on the key to identifying items in the list.

 

Do remember to define a key prop to display a list in JSX. If this will not be done, then we might get the below-given error.

 

Warning: Each child in a list should have a unique “key” prop.

import React from 'react';

function App() {
  const Movies = [
    { id: 1, name: 'Reservoir Dogs' },
    { id: 2, name: 'Airplane' },
    { id: 3, name: 'Doctor Zhivago' },
    { id: 4, name: 'Memento' },
    { id: 5, name: 'Braveheart' },
    { id: 6, name: 'Beauty and the Beast' },
    { id: 7, name: 'Seven' },
    { id: 8, name: 'The Seven Samurai' }
  ];

  return (
    <ul>
      {Movies.map(data => (
        <li key={data.id}> {data.name}</li>
      ))}
    </ul>
  );
}

export default App;

 

Step 3- Display Object List In React

In this step, we will come to know how to display the object list in React. This is done in a very simple manner. We will use the .map() method in React JSX for iterating over a list of objects. See below the example in which we have mapped a list of objects and displayed them in the React app.

import React from 'react';

function App() {
  const Users = [
    {
      id: '01',
      name: 'John Deo',
      email: 'john@gmail.com',
      phone: '202-555-0163'
    },
    {
      id: '02',
      name: 'Brad Pitt',
      email: 'fightclud@gmail.com',
      phone: '202-555-0106'
    },
  ];

  return (
    <ul>
      {Users.map((data) => (
        <li key={data.id}> 
          <p>{data.name}</p>
          <p>{data.email}</p>
          <p>{data.phone}</p>
        </li>
      ))}
    </ul>
  );
}

export default App;

 

Step 4- React Nested Lists Example

In this step, we will get to know how to combine two arrays and show the nested view using the list data in React.

import React from 'react';

function App() {
  const users = [
    {
      id: '01',
      name: 'John Deo',
      email: 'john@gmail.com',
      phone: '202-555-0163'
    },
    {
      id: '02',
      name: 'Brad Pitt',
      email: 'fightclud@gmail.com',
      phone: '202-555-0106'
    },
  ];

  const joinList = [users, users];

  return (
    <div>
        <ul>
            {joinList.map((nestedItem, i) => (
              <ul key={i}>
                <h3> List {i} </h3>
                {nestedItem.map(data => (
                  <li key={data.id}>
                    <div>{data.id}</div>
                    <div>{data.name}</div>
                    <div>{data.email}</div>
                    <div>{data.phone}</div>
                  </li>
                ))}
              </ul>
            ))}
          </ul>       
    </div>
  );
}

export default App;

 

Summary

So, here we conclude this tutorial in which we have learned to display the list in React app. We have also seen how to render a simple list item and show it in the front-end. Hope that you have also understood the concept of a key prop, showed the list of objects, and learned how to show the nested list items in React app.

Leave a Reply

Your email address will not be published. Required fields are marked *