javascript / beginner
Snippet
Listen rendern mit Array.map()
Die .map()-Methode erstellt ein neues Array, indem sie eine Funktion auf jedes Element im ursprünglichen Array anwendet. In Next.js ist dies der Standardweg, um Daten-Arrays in Listen von UI-Komponenten umzuwandeln.
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
Erklärung
1
tasks.map((task) => ...)
Durchläuft jede Aufgabe und gibt ein <li>-Element dafür zurück.
2
key={task.id}
Eine eindeutige Kennung, die React hilft, die Liste effizient zu aktualisieren, wenn sich Daten ändern.