Snippet

Listen rendern mit Array.map und eindeutigen Schlüsseln

In React werden Daten-Arrays mithilfe der Standardmethode map in Listen von JSX-Elementen umgewandelt. Jedes generierte Element benötigt ein eindeutiges 'key'-Attribut, damit React Änderungen, Ergänzungen und Löschungen effizient nachverfolgen kann.

snippet.js

javascript

function FruitList({ items }) {
  return (
    <ul>
      {items.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

react

Erklärung

function FruitList({ items }) {

Deklariert eine React-Komponente, die ein Array von Objekten über Props entgegennimmt.

{items.map((fruit) => (

Iteriert über jeden Fruchtnamen im Array, um ein neues JSX-Element zurückzugeben.

<li key={fruit.id}>{fruit.name}</li>

Rendert ein Listenelement mit einem eindeutigen Schlüssel (key) und gibt den Fruchtnamen aus.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Listen rendern mit Array.map und eindeutigen Schlüsseln

Verwandt