Rendering Lists with Array.map()

Snippet

Rendering Lists with Array.map()

The .map() method creates a new array by calling a function on every element in the original array. In Next.js, it is the standard way to transform data arrays into lists of UI components.

snippet.js
javascript
export default function TodoList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
}

nextjs

Breakdown

tasks.map((task) => ...)

Loops through each task and returns a <li> element for it.

key={task.id}

A unique identifier that helps React efficiently update the list when data changes.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Rendering Lists with Array.map()

Related