Další a předchozí

Teď projdeme celý balíček. Kterou kartičku aplikace ukazuje, je číslo, které se mění kliknutím, takže je to zase stav: index, na začátku 0, tedy první kartička. Kartička je pak slovicka[index] a tlačítka Předchozí a Další číslo změní o jedna:

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

Před první kartičkou nic není a za poslední taky ne. Tlačítka to ukážou pomocí disabled (vypnuté), které znáte z lekce Formuláře: u tlačítka Předchozí disabled={index === 0}. Na vypnuté tlačítko se kliknout nedá, takže index nikdy neopustí balíček.

Mezi tlačítky aplikace ukáže, kde jste, třeba 3 / 12. Žádný nový stav k tomu nepotřebujete: spočítá se při vykreslení z index + 1 (lidé počítají od jedničky) a slovicka.length.

Kartička, která zůstane otočená. Otočte první kartičku a klikněte na Další: druhá je otočená taky. Proč? React vidí na stejném místě jako předtím komponentu Karticka, jen s jinými props, a tak si ji ponechá i s jejím stavem, včetně otocena. Klíč (key) Reactu řekne, která kartička to je, stejně jako v seznamech. Když se klíč změní, React ji vezme jako jinou kartičku a vytvoří ji znovu, s novým stavem:

<Karticka
    key={karticka.id}
    slovo={karticka.anglicky}
    preklad={karticka.cesky}
/>

Typická chyba je přidat useState(0) pod podmínky if, vedle const karticka. První vykreslení pak zavolá méně hooků než to další a React skončí chybou Rendered more hooks than during the previous render. (při vykreslení bylo víc hooků než minule). Dejte ho nahoru k ostatním hookům.