Listen und Formulare in React

Fast jede React-App zeigt Listen an und nimmt Eingaben über Formulare entgegen. Ob Produktliste, Kommentare oder ein Anmeldeformular – die Muster dahinter sind immer ähnlich. In diesem Beitrag lernst du, wie du Listen mit map renderst, warum Keys so wichtig sind und wie du mit kontrollierten Formularfeldern arbeitest.

Listen mit map rendern

In React renderst du Listen, indem du ein Array mit der JavaScript-Methode map in eine Liste von Elementen umwandelst:

function Einkaufsliste() {
  const artikel = ["Milch", "Brot", "Eier"];

  return (
    <ul>
      {artikel.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

Die geschweiften Klammern erlauben dir JavaScript direkt im JSX. map erzeugt aus jedem Eintrag ein <li>-Element.

Warum Keys wichtig sind

Dir ist sicher das key-Attribut aufgefallen. React nutzt Keys, um Listenelemente eindeutig zu identifizieren. So weiß die Bibliothek bei Änderungen, welches Element neu, gelöscht oder verschoben wurde. Am besten nutzt du eine stabile ID statt des Index:

function Nutzer() {
  const users = [
    { id: 1, name: "Anna" },
    { id: 2, name: "Ben" },
  ];

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

Der Index als Key funktioniert nur, wenn sich die Reihenfolge nie ändert. Sobald du Einträge hinzufügst oder entfernst, solltest du eine echte ID verwenden, um Render-Fehler zu vermeiden.

Kontrollierte Eingabefelder

In React verbindest du Eingabefelder mit dem State. Man spricht von kontrollierten Komponenten: Der State ist die einzige Quelle der Wahrheit, und das Eingabefeld zeigt immer den aktuellen Wert an:

function NameEingabe() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hallo, {name}</p>
    </div>
  );
}

Bei jeder Eingabe feuert onChange, liest den neuen Wert aus e.target.value und speichert ihn im State. Dadurch bleibt Anzeige und Zustand immer synchron.

Ein Formular abschicken

Beim Absenden eines Formulars willst du meist verhindern, dass die Seite neu lädt. Dafür rufst du e.preventDefault() auf:

function LoginForm() {
  const [email, setEmail] = useState("");

  function handleSubmit(e) {
    e.preventDefault();
    console.log("Anmeldung mit:", email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Anmelden</button>
    </form>
  );
}

So behältst du die volle Kontrolle über die Daten und kannst sie etwa an eine API schicken.

Listen dynamisch erweitern

Oft willst du Listen und Formulare kombinieren – etwa um neue Einträge hinzuzufügen. Dabei erzeugst du immer ein neues Array, statt das alte zu verändern:

function Aufgaben() {
  const [liste, setListe] = useState([]);
  const [text, setText] = useState("");

  function hinzufuegen(e) {
    e.preventDefault();
    setListe([...liste, text]);
    setText("");
  }

  return (
    <form onSubmit={hinzufuegen}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button>Hinzufügen</button>
      <ul>
        {liste.map((eintrag, i) => (
          <li key={i}>{eintrag}</li>
        ))}
      </ul>
    </form>
  );
}

Fazit

Listen und Formulare sind das tägliche Brot der React-Entwicklung. Merke dir: Mit map verwandelst du Arrays in Elemente, und jedes Listenelement braucht einen stabilen Key. Eingabefelder machst du zu kontrollierten Komponenten, indem du sie an den State bindest, und beim Absenden verhinderst du mit preventDefault das Neuladen. Mit diesen Bausteinen kannst du schon richtige interaktive Oberflächen bauen. Im nächsten Beitrag setzen wir alles zusammen und bauen eine vollständige Todo-App.