Kann ich

Karteikarten dienen dazu, herauszufinden, welche Wörter du kannst. Unter der Karte bekommt die App zwei weitere Buttons: Noch nicht und Kann ich. Beide gehen zur nächsten Karte weiter, und Kann ich merkt sich außerdem, dass du das Wort kannst.

Was merkt sich die App? Nicht die ganzen Wörter, nur ihre ids: Der State gelernt ist ein Array von Zahlen, etwa [2, 5], zuerst leer. Wie du aus der State-Lektion weißt, wird ein Array im State nie an Ort und Stelle geändert (push() würde auf der Seite nichts ändern). Du erzeugst stattdessen ein neues Array, mit Spread, um eine ID hinzuzufügen, und mit filter(), um eine zu entfernen:

setGelernt((gelernt) => [...gelernt, karte.id]);
setGelernt((gelernt) => gelernt.filter((id) => id !== karte.id));

Zweimal auf Kann ich bei derselben Karte zu klicken darf ihre ID nicht zweimal ins Array legen, also füge sie nur hinzu, wenn gelernt.includes(karte.id) false ist.

Der Punktestand über der Karte, Gelernt: 2 von 12, wird jedes Mal neu berechnet: gelernt.length von woerter.length. Weil er bei jedem Rendern aus dem State berechnet wird, stimmt er immer.

Die neuen Buttons gehen weiter, indem sie weiter() aufrufen. Anders als Weiter sind sie aber bei der letzten Karte nicht deaktiviert, also muss weiter() selbst prüfen, ob es eine nächste Karte gibt:

function weiter() {
    if (index < woerter.length - 1) {
        setIndex((index) => index + 1);
    }
}

Ohne die Prüfung würde Kann ich bei der letzten Karte index über das Ende des Stapels hinausschieben, woerter[index] wäre undefined, und die App würde mit einem TypeError abbrechen: Es gibt dort keine Karte, die sie zeigen könnte.