How to Display List in React JS App

React display list of items example; This tutorial will show you 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.

How to Display List in React JS App

Let’s follow the following steps to show list of items in react js app:

• Simple React List Example
• Render a List in React with Key
• React Nested Lists Example

Simple React List Example

To render the list items using .map() method, as shown below:

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

To render the list items using .map() method, as shown below:

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;

React Nested Lists Example

 Two arrays and show the nested view using the list data in React; as shown below:

import React from 'react';

function App() {
  const users = [
    {
      id: '01',
      name: 'John Deo',
      email: '[email protected]',
      phone: '202-555-0163'
    },
    {
      id: '02',
      name: 'Brad Pitt',
      email: '[email protected]',
      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

React display list of items example; You have learned 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.

Recommended React JS Tutorials