How to Display List in React JS App

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

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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