Знаю

Карточки нужны, чтобы выяснить, какие слова вы знаете. Под карточкой появятся ещё две кнопки: Ещё нет и Знаю. Обе переходят к следующей карточке, а «Знаю» ещё и запоминает, что вы знаете это слово.

Что запоминает приложение? Не слова целиком, а только их id: состояние known — массив чисел, например [2, 5], сначала пустой. Как вы знаете из урока «Состояние», массив в состоянии никогда не меняют на месте (push() ничего бы не изменил на странице). Вместо этого создают новый массив: с помощью spread добавляют id, а с помощью filter() убирают:

setKnown((known) => [...known, card.id]);
setKnown((known) => known.filter((id) => id !== card.id));

Если дважды нажать «Знаю» на одной карточке, её id не должен попасть в массив дважды, поэтому добавляйте его, только если known.includes(card.id) равно false.

Счёт над карточкой, Выучено: 2 из 12, вычисляется заново: known.length из words.length. Поскольку он вычисляется из состояния при каждой отрисовке, он всегда верен.

Новые кнопки переходят дальше, вызывая handleNext(). Но в отличие от «Вперёд», на последней карточке они не отключены, поэтому handleNext() должна сама проверять, есть ли следующая карточка:

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

Без этой проверки «Знаю» на последней карточке сдвинуло бы index за конец колоды, words[index] оказалось бы undefined, и приложение остановилось бы с TypeError: показывать там нечего.