Listen rendern

In den meisten Apps arbeitest du mit Listen von Daten — Studenten, Kurse, Ergebnisse. Mit map verwandelst du ein JavaScript-Array direkt in eine Liste von JSX-Elementen. Dabei spielt der key-Prop eine entscheidende Rolle: Er hilft React, jedes Element eindeutig zu identifizieren.

Daten aus einem Array rendern

Stell dir vor, du hast eine Liste von Fächern:

const faecher = ["Informatik", "Mathematik", "Physik", "Biologie"];

Um daraus eine HTML-Liste zu erzeugen, verwendest du map. Am übersichtlichsten ist es, das Ergebnis zuerst in einer Variablen zu speichern:

function FaecherListe() {
  const faecher = ["Informatik", "Mathematik", "Physik", "Biologie"];

  const items = faecher.map(fach => (
    <li key={fach}>{fach}</li>
  ));

  return (
    <ul>{items}</ul>
  );
}

map erzeugt ein neues Array — diesmal kein Array aus Strings, sondern aus JSX-Elementen. Dieses Array kannst du direkt in JSX einsetzen, weil React Arrays von Elementen automatisch rendert.

Inline in JSX

Sobald dir das Muster vertraut ist, kannst du map auch direkt in JSX schreiben — ohne Zwischenvariable:

function FaecherListe() {
  const faecher = ["Informatik", "Mathematik", "Physik", "Biologie"];

  return (
    <ul>
      {faecher.map(fach => (
        <li key={fach}>{fach}</li>
      ))}
    </ul>
  );
}

Beide Varianten sind gleichwertig. Die Inline-Variante ist kürzer, die Variable macht den Code lesbarer, wenn die map-Logik komplexer wird.

Elemente filtern

Oft willst du nicht alle Elemente anzeigen, sondern nur eine Teilmenge. Dafür kombinierst du filter mit map:

function AktiveStudenten() {
  const studenten = [
    { id: 1, name: "Dan", aktiv: true },
    { id: 2, name: "Sophie", aktiv: true },
    { id: 3, name: "Max", aktiv: false },
    { id: 4, name: "Anna", aktiv: true },
  ];

  const aktive = studenten.filter(s => s.aktiv);

  return (
    <ul>
      {aktive.map(student => (
        <li key={student.id}>{student.name}</li>
      ))}
    </ul>
  );
}

Zuerst filterst du die aktiven Studenten heraus, dann renderst du nur diese. Das Original-Array bleibt unverändert.

Der `key`-Prop

Dir ist sicher aufgefallen, dass jedes Element in den Beispielen einen key-Prop hat. Aber warum?

Wenn sich deine Liste ändert — Elemente werden hinzugefügt, entfernt oder umsortiert — muss React herausfinden, was sich geändert hat. Ohne Keys müsste React die gesamte Liste neu rendern. Mit Keys kann React jedes Element eindeutig zuordnen und nur die tatsächlichen Änderungen im DOM vornehmen.

// React kann jedes Element über seinen key tracken
{studenten.map(student => (
  <li key={student.id}>{student.name}</li>
))}

Die drei Regeln für Keys

Keys müssen unter Geschwistern eindeutig sein. Zwei <li>-Elemente in derselben Liste dürfen nicht denselben Key haben. In verschiedenen Listen ist derselbe Key aber kein Problem.
Keys sollten stabil sein. Der Key eines Elements darf sich zwischen Renders nicht ändern. Deshalb ist der Array-Index bei dynamischen Listen problematisch — wenn du ein Element am Anfang einfügst, verschieben sich alle Indizes.
Keys kommen aus deinen Daten. Verwende IDs aus der Datenbank, eindeutige Slugs oder andere stabile Bezeichner.

Array-Index als Key bei dynamischen Listen:

// Problematisch, wenn Elemente hinzugefügt, entfernt oder umsortiert werden
{studenten.map((student, index) => (
  <li key={index}>{student.name}</li>
))}

Wenn ein Element am Anfang eingefügt wird, verschieben sich alle Daten um eine Position — aber die Keys (0, 1, 2, …) bleiben gleich. React ordnet jedem bestehenden Key nun die falschen Daten zu und aktualisiert unnötig den Inhalt jedes Elements. Der einzige „neue” Key ist der letzte Index. Besonders problematisch wird das, wenn Listenelemente eigenen State haben — der State bleibt am Key hängen, nicht an den Daten. Bei statischen Listen, die sich nie ändern, ist der Index als Key hingegen unproblematisch.

Zufällige Keys:

// Falsch — bei jedem Render neue Keys
{studenten.map(student => (
  <li key={Math.random()}>{student.name}</li>
))}

Math.random() erzeugt bei jedem Render neue Werte. React zerstört und erstellt alle Elemente jedes Mal neu — schlecht für Performance und State.

Fehlende Keys: Ohne Keys zeigt React eine Warnung in der Konsole. Die Liste funktioniert zwar, aber React kann Änderungen nicht effizient nachverfolgen.

Woher kommen Keys?

In der Praxis kommen Keys aus verschiedenen Quellen:

Datenbank-IDs — Die häufigste und beste Quelle. Jeder Datensatz hat typischerweise eine eindeutige ID.
Slugs oder eindeutige Bezeichner — Zum Beispiel Kurs-Kürzel wie "inf-101" oder E-Mail-Adressen.
Selbst generierte IDs — Wenn du Daten lokal erzeugst (z.B. eine Todo-Liste), generiere die ID beim Erstellen des Elements mit crypto.randomUUID(), nicht beim Rendern.

// Beim Erstellen eines neuen Eintrags
function neuerStudent(name) {
  return {
    id: crypto.randomUUID(),
    name,
    aktiv: true,
  };
}

Der key ist kein normaler Prop — du kannst ihn innerhalb der Komponente nicht über props.key auslesen. Wenn du den Wert auch in der Komponente brauchst, übergib ihn zusätzlich als eigenen Prop:

<StudentCard key={student.id} id={student.id} name={student.name} />

Komponenten aus Listen extrahieren

Wenn die Elemente deiner Liste komplexer werden, extrahiere sie in eine eigene Komponente:

function StudentCard({ name, fach, note }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>Fach: {fach}</p>
      <p>Note: {note}</p>
    </div>
  );
}

function StudentenListe() {
  const studenten = [
    { id: 1, name: "Dan", fach: "Informatik", note: 1.3 },
    { id: 2, name: "Sophie", fach: "Mathematik", note: 1.7 },
    { id: 3, name: "Max", fach: "Physik", note: 2.3 },
  ];

  return (
    <div>
      {studenten.map(student => (
        <StudentCard
          key={student.id}
          name={student.name}
          fach={student.fach}
          note={student.note}
        />
      ))}
    </div>
  );
}

Beachte: Der key gehört auf den <StudentCard>-Aufruf — also dorthin, wo map die Elemente erzeugt. Nicht innerhalb von StudentCard auf ein <div> setzen.

Verschachtelte Listen

Manchmal hast du Daten mit einer Hierarchie — zum Beispiel Fachbereiche mit jeweils mehreren Studenten:

const fachbereiche = [
  {
    id: "inf",
    name: "Informatik",
    studenten: [
      { id: 1, name: "Dan" },
      { id: 2, name: "Anna" },
    ],
  },
  {
    id: "math",
    name: "Mathematik",
    studenten: [
      { id: 3, name: "Sophie" },
      { id: 4, name: "Max" },
    ],
  },
];

function FachbereichListe() {
  return (
    <div>
      {fachbereiche.map(fb => (
        <section key={fb.id}>
          <h2>{fb.name}</h2>
          <ul>
            {fb.studenten.map(student => (
              <li key={student.id}>{student.name}</li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}

Jede Ebene braucht ihre eigenen Keys. Die äußere Liste verwendet fb.id, die innere student.id.

Alles zusammen

Hier ein vollständiges Beispiel, das filter, toSorted, map, Keys und eine extrahierte Komponente kombiniert:

function StudentCard({ name, fach, note }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>Fach: {fach}</p>
      <p>Note: {note}</p>
      {note <= 1.5 && <span className="badge">Auszeichnung</span>}
    </div>
  );
}

function Bestenliste({ studenten }) {
  const aktivebestStudenten = studenten
    .filter(s => s.aktiv && s.note != null)
    .toSorted((a, b) => a.note - b.note);

  if (aktivebestStudenten.length === 0) {
    return <p>Keine aktiven Studenten mit Noten vorhanden.</p>;
  }

  return (
    <div>
      <h2>Bestenliste</h2>
      {aktivebestStudenten.map(student => (
        <StudentCard
          key={student.id}
          name={student.name}
          fach={student.fach}
          note={student.note}
        />
      ))}
    </div>
  );
}

Dieses Beispiel zeigt den typischen Ablauf:

Filtern — Nur aktive Studenten mit vorhandener Note.
Sortieren — Nach Note aufsteigend, mit toSorted (nicht-mutierend).
Sonderfall behandeln — Leere Liste abfangen.
Rendern — Über map mit stabilen Keys und einer extrahierten Komponente.

Zusammenfassung

Konzept	Beschreibung
`array.map(fn)`	Erzeugt ein JSX-Element pro Array-Eintrag
`array.filter(fn)`	Filtert Elemente vor dem Rendern
`key`-Prop	Eindeutiger Bezeichner pro Listenelement — hilft React, Änderungen effizient zu erkennen
Keys aus Daten	Verwende IDs, Slugs oder andere stabile Werte — nicht Array-Indizes bei dynamischen Listen
Komponenten extrahieren	Lagere komplexe Listenelemente in eigene Komponenten aus — `key` gehört auf den Komponentenaufruf