javascript / beginner
Snippet
Listen rendern mit .map()
Die .map()-Methode ist der Standardweg, um in React ein Array von Daten in ein Array von JSX-Elementen umzuwandeln.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function UserList() {const users = ['Alice', 'Bob', 'Charlie'];return (<ul>{users.map((user) => (<li key={user}>{user}</li>))}</ul>);}
react
Erklärung
1
users.map((user) => (...))
Iteriert durch jedes Element im 'users'-Array und gibt für jedes ein neues <li>-Element zurück.
2
key={user}
Ein spezielles Attribut (key), das React hilft zu erkennen, welche Elemente sich geändert haben, hinzugefügt oder entfernt wurden.