Was wird verwendet, um eine Datenliste in JSX anzuzeigen?

Um in JSX angezeigtes Datenlistenelement wird mit der .map()-Methode von JavaScript-Arrays erstellt.

// Beispiel eines Datenarrays
const items = ['Punkt 1', 'Punkt 2', 'Punkt 3'];

// Anzeige der Liste mit .map()
const List = () => (
  <ul>
    {items.map((item, index) => (
      // Es ist notwendig, für jedes Listenelement einen eindeutigen Schlüssel zu verwenden
      <li key={index}>{item}</li>
    ))}
  </ul>
);

map() durchläuft jedes Element des Arrays und gibt ein neues Array von React-Elementen zurück, die dann im DOM gerendert werden. Es ist wichtig, eine eindeutige key-Eigenschaft für jedes Element in der Liste zu verwenden. Dies hilft React, die Benutzeroberfläche effizient zu aktualisieren, wenn sich die Liste ändert. Als key kann eine eindeutige Daten-ID verwendet werden, oder bei Fehlen dieser der Index des Elements im Array.