React – Render Array as List

React – Render Array as List

Rendering arrays as lists: JavaScript Arrays can be rendered as HTML Lists in React when displaying dynamic content such as user data, tasks, or any other type of collection. React provides a simple and efficient way to iterate over arrays and render their content as list items using the map function.

In this tutorial, we will walk you through the process of rendering arrays as lists in React, with practical examples and best practices.

By the end of this tutorial, you will understand how to:

• Use the map method to render an array as a list
• Assign unique keys to list items for better performance
• Handle complex data structures when rendering lists

---

Steps to Render an Array as a List

Step 1: Create an Array

First, you need an array containing the data you want to display. This can be a simple array of strings, numbers, or objects.

Step 2: Use the map Method

Use the map method to iterate over the array and return JSX for each item. Wrap the returned JSX in a container element such as an unordered list (<ul>) or ordered list (<ol>).

Step 3: Assign Unique Keys

Each item in the list should have a unique key prop to help React identify and manage DOM elements efficiently. The key should be unique among siblings but does not need to be globally unique.

---

Examples

Example 1: Rendering a Simple Array

In this example, we render an array of strings as a list.

Filename: App.js

import React from 'react';

const App = () => {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explanation:

• The array items contains three fruit names.
• The map function is used to iterate over the array, returning a <li> element for each item.
• The key prop is set to the array index to uniquely identify each list item.

Output

---

Example 2: Rendering an Array of Objects

This example demonstrates how to render an array of objects as a list.

Filename: App.js

import React from 'react';

const App = () => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explanation:

• The users array contains objects with id and name properties.
• The map function is used to iterate over the array, returning a <li> element for each user.
• The key prop is set to user.id, which is a unique identifier for each user.

Output

---

Example 3: Conditional Rendering in a List

This example demonstrates how to conditionally render elements in a list.

Filename: App.js

import React from 'react';

const App = () => {
  const tasks = [
    { id: 1, title: 'Buy groceries', completed: true },
    { id: 2, title: 'Clean the house', completed: false },
    { id: 3, title: 'Pay bills', completed: true }
  ];

  return (
    <div>
      <h1>Task List</h1>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.title} {task.completed ? '(Completed)' : '(Pending)'}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Explanation:

• The tasks array contains objects with id, title, and completed properties.
• The map function is used to iterate over the array, and a conditional expression is used to display “Completed” or “Pending” based on the completed property.
• The key prop is set to task.id to uniquely identify each task.

Output

---

Conclusion

In this tutorial, you learned how to render arrays as lists in React using the map method. You also learned the importance of assigning unique keys to list items for optimal performance.