javascript / beginner
Snippet
Umwandeln von Objekt-Arrays in JSX-Elemente mit Array-Map
In React können JavaScript-Arrays mit der integrierten .map()-Methode in UI-Elemente umgewandelt werden. Jedes erzeugte Element benötigt ein eindeutiges 'key'-Attribut, damit React Listeneinträge effizient nachverfolgen und aktualisieren kann.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const userList = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }];export function UserNames() {return (<ul>{userList.map((user) => (<li key={user.id}>{user.name}</li>))}</ul>);}
react
Erklärung
1
const userList = [ ... ];
Definiert ein Array von Objekten, die Benutzerdaten enthalten.
2
{userList.map((user) => (
Iteriert durch das Array und transformiert jedes Benutzerobjekt in ein JSX-Element.
3
<li key={user.id}>{user.name}</li>
Gibt ein Listenelement mit einem eindeutigen key-Prop basierend auf der Benutzer-ID zurück.