javascript / beginner
Snippet
Listen rendern mit map()
In React verwenden wir die JavaScript-Methode map(), um ein Array zu durchlaufen und jedes Element in ein JSX-Element umzuwandeln. Dies ist besonders nützlich, um Datenlisten anzuzeigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
function FruitList() {const fruits = ['Apple', 'Banana', 'Orange'];return (<ul>{fruits.map((fruit, index) => (<li key={index}>{fruit}</li>))}</ul>);}
react
Erklärung
1
fruits.map((fruit, index) => (...))
Iteriert über das fruits-Array und liefert das aktuelle Element (fruit) sowie dessen Position (index).
2
key={index}
Ein eindeutiger Identifikator, der React hilft, die Liste effizient zu aktualisieren, wenn sich Elemente ändern.