Вперёд и назад

Теперь пройдём по всей колоде. Какую карточку показывает приложение, определяет число, которое меняется по щелчкам, то есть снова состояние: index, сначала 0 — первая карточка. Тогда карточка — это words[index], а кнопки Назад и Вперёд меняют число на единицу:

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

Перед первой карточкой ничего нет, а после последней нечего показывать. Кнопки сообщают об этом через disabled, который вы знаете из урока «Формы»: disabled={index === 0} для кнопки «Назад». Недоступную кнопку нельзя нажать, поэтому index никогда не выходит за пределы колоды.

Между кнопками приложение показывает, где вы находитесь, например 3 / 12. Для этого не нужно нового состояния: позиция вычисляется при отрисовке из index + 1 (люди считают с единицы) и words.length.

Карточка, которая остаётся перевёрнутой. Переверните первую карточку и нажмите «Вперёд»: вторая тоже окажется перевёрнутой. Почему? React видит Flashcard на том же месте, что и раньше, только с другими пропсами, поэтому сохраняет компонент и его состояние, в том числе flipped. key подсказывает React, какая это карточка, как в списках. Когда ключ меняется, React считает, что это другая карточка, и создаёт её заново, с новым состоянием:

<Flashcard
    key={card.id}
    word={card.spanish}
    translation={card.russian}
/>

Типичная ошибка — добавить useState(0) ниже if, рядом с const card. Тогда при первой отрисовке вызывается меньше хуков, чем при следующей, и React останавливается с ошибкой Rendered more hooks than during the previous render. Поставьте его в начало, вместе с остальными хуками.