How to Create and Display List in React

React display list items tutorial; Lists are highly useful for showing information to users, and this example will explain how you can display a list in React app to display data visually.

We will create a reusable list component in react and share the step-by-step instruction that you can follow and enhance react development skills.

React is a JavaScript-based front-end framework that is getting worldwide popularity; you can use JavaScript methods and functions to create and amplify any functionality in React. To build the list items and display the list in React, we are taking the help of the Array.map() method.

If you are new to React and trying hard the nitty-gritty of React, then fret not; this extensive guide covers everything for showing list items in React through the map() method.

Basic Way to Show List in React

In the react file, we created a static array by the name of Movies, added some values into the Movies array.

Using the map() method, we iterated over the array items. We displayed the list of items, and this is just a simple example but not the traditional method we usually use.

import React from 'react';

function App() {
  const Movies = [
    { name: 'Avengers' },
    { name: 'Alien' },
    { name: 'Top Gun' },
    { name: 'Aliens' },
    { name: 'The New Mutants' },
    { name: 'Dunkirk' },
    { name: 'Inception' },
    { name: 'AD Astra' }
  ];

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

export default App;

Render List with Key in React

This is the most authentic method to render list in react. It is easy to get top-level list items, and you have to define Keys that are unique identifiers and should be defined to list items using the map array method.

Ideally, Keys are used to adding, updating, and deleting list items; preferably, this process makes the react robust framework.

import React from 'react';

function App() {
  const Movies = [
    { id: 1, name: 'Avengers' },
    { id: 2, name: 'Alien' },
    { id: 3, name: 'Top Gun' },
    { id: 4, name: 'Aliens' },
    { id: 5, name: 'The New Mutants' }
  ];

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

export default App;

Show List of Objects in React

So far, we have seen how to display array items, but what if you have an object of data that needs to be listed on the view. Well, react allows you to display the list of objects.

As you can see in the below example, we have data and show the list of objects in React.

import React from 'react';

function App() {
  const Posts = [
    {
      "userId": 1,
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "userId": 1,
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    },
    {
      "userId": 1,
      "id": 4,
      "title": "eum et est occaecati",
      "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
    }
  ];

  return (
    <ul>
      {Posts.map((res) => (
        <li key={res.id}> 
          <p>{res.title}</p>
          <p>{res.body}</p>
        </li>
      ))}
    </ul>
  );
}

export default App;

Show Nested List in React

In React, you can generate a map within a map; you can create nested list items in React through this technique.

import React from 'react';

function App() {
  const Posts = [
    {
      "id": 1,
      "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
    },
    {
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
    },
    {
      "id": 3,
      "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
      "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
    },
  ];

  const combineList = [Posts, Posts];

  return (
    <div>
        <ul>
            {combineList.map((nestedItem, i) => (
              <ul key={i}>
                <strong> List Item: {i} </strong>
                {nestedItem.map(res => (
                  <li key={res.id}>
                    <div>{res.id}</div>
                    <div>{res.title}</div>
                    <div>{res.body}</div>
                  </li>
                ))}
              </ul>
            ))}
          </ul>       
    </div>
  );
}

export default App;

Summary

So this was it; we have discussed various techniques for displaying list items in react. We demonstrated how you could show a list in react with non-traditional way, show list item with react way with key, and display list from the objects in react.

Lastly, we shared how to show the nested list in react. We hope this guide helped you learn to render lists in React; please share this tutorial with others.