Už to umím

Kartičky jsou od toho, abyste zjistili, která slovíčka umíte. Pod kartičkou přibudou další dvě tlačítka: Ještě ne a Umím. Obě přejdou na další kartičku a Umím si navíc zapamatuje, že slovíčko umíte.

Co si aplikace pamatuje? Ne celá slovíčka, jen jejich id: stav naucene je pole čísel, třeba [2, 5], na začátku prázdné. Jak víte z lekce Stav, pole ve stavu se nikdy nemění na místě (push() by na stránce nic nezměnil). Místo toho vytvoříte nové pole: pomocí tří teček (spread) id přidáte, pomocí filter() ho odeberete:

setNaucene((naucene) => [...naucene, karticka.id]);
setNaucene((naucene) => naucene.filter((id) => id !== karticka.id));

Když na stejné kartičce kliknete na Umím dvakrát, nesmí se její id dostat do pole dvakrát. Přidejte ho proto, jen když je naucene.includes(karticka.id) rovno false.

Skóre nad kartičkou, Umím: 2 z 12, se zase spočítá: naucene.length ze slovicka.length. Počítá se ze stavu při každém vykreslení, takže vždycky sedí.

Nová tlačítka přejdou dál zavoláním jdiDal(). Na rozdíl od tlačítka Další ale na poslední kartičce vypnutá nejsou, takže jdiDal() musí sama zkontrolovat, že nějaká další kartička je:

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

Bez této kontroly by Umím na poslední kartičce posunulo index za konec balíčku, slovicka[index] by bylo undefined a aplikace by skončila chybou TypeError: žádná kartička, kterou by mohla ukázat, tam není.