React List Example Tutorial – Display List in React

If you are a beginner React Developer and want to know how to display a list of items on the browser screen then you are at the right place.In this tutorial, we are going to learn how to show a simple list item, a list of objects, Nesting Lists in React, and lastly, we will have a look at how to update the state of the React list.

To show the lists, we will learn to use JavaScript’s Array.map() method. This method takes data transform to list view.

Simple React List Example

We have a array of Fruits, and we want to display the Fruits list in React app.

So here is the code that we will use to render the list items 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;

Render a List in React with Key

In the following React List example, we render a list of items that contain movie names and their respective id.

We are using the .map() method to fetch the items from the Movies array, and every item has a unique key property.

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

Since React uses a virtual DOM and depends on the key to identifying items of a list, so in the above list example, we provided a unique id to every list item.

If we don’t define key prop to display a list in JSX, we might get following 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;

Display Object List in React

Displaying items from a list of objects in React is very simple.

We can iterate over a list of objects using the .map() method in React JSX.

Here is the example in which we 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;

React Nested Lists Example

In this step, we will 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;

Conclusion

So this was the React List view tutorial, In this tutorial, we learned how to render a simple list item and show in a front-end.

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