Jede Karte hat ihren eigenen State

Wo bewahrt React den State auf? Nicht in der Funktion, denn die läuft bei jedem Rendern neu. React bewahrt ihn für die Komponente an ihrer Stelle auf der Seite auf. Wird eine Komponente dreimal verwendet, hat also jede der drei ihren eigenen State.

Hier eine BandKarte mit einem Like-Button, in einer eigenen Datei:

import { useState } from "react";

export default function BandKarte({ name }) {
    const [likes, setLikes] = useState(0);

    return (
        <li className="karte">
            <h2>{name}</h2>
            <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>
        </li>
    );
}

Und App zeigt drei davon:

<ul>
    <BandKarte name="Nachtzüge" />
    <BandKarte name="Mondkatzen" />
    <BandKarte name="Eulenchor" />
</ul>

Klickst du zweimal auf das Herz von Mondkatzen, zeigt nur diese Karte ♥ 2. Die anderen beiden zeigen weiterhin ♥ 0. Jede BandKarte hat ihr eigenes likes, obwohl alle aus derselben Funktion stammen, so wie drei Kopien eines Formulars getrennt ausgefüllt werden. (Der Handler besteht hier aus einer kurzen Zeile, deshalb steht er direkt im JSX.)

Kommen die Karten aus map(), unterscheidet React sie am key. Das ist ein weiterer Grund für Keys aus Ids: Ändert sich die Liste, behält jede Band ihre eigenen Likes.

State ist privat für seine Komponente. App weiß nicht, wie viele Likes eine Karte hat, und die Karten wissen nichts voneinander. Was, wenn App die Zahlen braucht, etwa um alle Likes zusammen zu zeigen? Dann müsste der State nach oben in App wandern. Darum geht es später im Kurs in der Lektion State teilen.