Rendering Lists with map()

Snippet

Rendering Lists with map()

In React, we use the JavaScript map() method to loop through an array and transform each item into a JSX element, which is useful for displaying lists of data.

snippet.js

javascript

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange'];
 
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

react

Breakdown

fruits.map((fruit, index) => (...))

Iterates over the fruits array, providing the current item (fruit) and its position (index).

key={index}

A unique identifier that helps React efficiently update the list when items change.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Rendering Lists with map()

Related