Weiter und zurück

Jetzt gehen wir den ganzen Stapel durch. Welche Karte die App zeigt, ist eine Zahl, die sich mit Klicks ändert, also wieder State: index, beginnend bei 0, der ersten Karte. Die Karte ist dann woerter[index], und die Buttons Zurück und Weiter ändern die Zahl um eins:

function weiter() {
    setIndex((index) => index + 1);
}

Vor der ersten Karte ist nichts, und nach der letzten auch nicht. Die Buttons zeigen das mit disabled, das du aus der Lektion über Formulare kennst: disabled={index === 0} für Zurück. Ein deaktivierter Button lässt sich nicht anklicken, also verlässt index den Stapel nie.

Zwischen den Buttons zeigt die App, wo du bist, etwa 3 / 12. Dafür brauchst du keinen neuen State: Es wird beim Rendern berechnet, aus index + 1 (Menschen zählen ab 1) und woerter.length.

Eine Karte, die umgedreht bleibt. Drehe die erste Karte um und klicke auf Weiter: Die zweite Karte ist auch umgedreht. Warum? React sieht eine Karteikarte an derselben Stelle wie vorher, nur mit anderen Props, also behält es die Komponente und ihren State, auch umgedreht. Ein key sagt React, um welche Karte es sich handelt, wie bei Listen. Ändert sich der Key, betrachtet React es als eine andere Karte und erzeugt sie neu, mit neuem State:

<Karteikarte
    key={karte.id}
    wort={karte.englisch}
    uebersetzung={karte.deutsch}
/>

Ein typischer Fehler ist, useState(0) unter die ifs zu setzen, neben const karte. Das erste Rendern ruft dann weniger Hooks auf als das nächste, und React bricht mit dem Fehler Rendered more hooks than during the previous render. ab. Setze es nach oben, zu den anderen Hooks.