Listen und Daten dynamisch anzeigen

💡 Die Kernidee im Alltag:

"Niemand schreibt 100 HTML-Karten von Hand. Wenn du eine Liste von Produkten oder Chat-Nachrichten hast, nutzt du `.map()`, um sie automatisch auf den Bildschirm zu zaubern."

Wie es wirklich funktioniert (Erklärt für 12-Jährige)

Eine Liste rendern in React:

function AufgabenListe() {
  const aufgaben = [
    { id: 1, text: "Einkaufen gehen" },
    { id: 2, text: "Zimmer aufräumen" },
    { id: 3, text: "React lernen" }
  ];

  return (
    <ul>
      {aufgaben.map(aufgabe => (
        <li key={aufgabe.id}>
          {aufgabe.text}
        </li>
      ))}
    </ul>
  );
}

KI-Power-Tipp für Entwickler

Empfohlener Assistent: Cursor / ChatGPT

Golden Prompt für deinen Editor:

Warum warnt React in der Konsole mit 'Each child in a list should have a unique key prop'? Warum sollte man nicht den Array-Index als Key verwenden?

Qualitäts-Prüfung: Die Antwort muss erklären, dass beim Sortieren oder Löschen von Einträgen falsche Index-Keys zu Rendering-Glithces führen.

Vorherige Lektion: State mit useState (Das Kurzzeitgedächtnis einer Komponente)

Nächste Lektion: C# Syntax & Typen (Strenge Ordnung für stabile Systeme)

Interaktive Übung & lokaler Testlauf

Rendere ein Array mit `.map(item => <li key={item.id}>{item.name}</li>)`.