javascript / beginner
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
1
2
3
4
5
6
7
8
9
export default function TodoList({ tasks }) {return (<ul>{tasks.map((task) => (<li key={task.id}>{task.text}</li>))}</ul>);}
nextjs
Breakdown
1
tasks.map((task) => ...)
Loops through each task and returns a <li> element for it.
2
key={task.id}
A unique identifier that helps React efficiently update the list when data changes.