React Lists

In React, you can render lists of data dynamically. Lists are a common feature in React applications, such as displaying user data, product catalogs, or items in a to-do list. React uses JavaScript’s map() method to render lists efficiently, and each list item should have a unique key prop to ensure proper performance and rendering.

1 Rendering a Simple List

In this example, we will render a list of fruits dynamically using the map() function. Each item in the list will be displayed as an HTML <li> element.

App.js

</>

Copy

import React from 'react';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

export default FruitList;

Explanation:

fruits: An array containing the list of fruit names.
map(): Iterates over the fruits array and creates an <li> element for each fruit.
key: Provides a unique identifier for each list item. In this case, the index is used as the key.

Output: