Next and Previous

Now let's go through the whole deck. Which card the app shows is a number that changes with clicks, so it's state again: index, starting at 0, the first card. The card is then words[index], and the buttons Previous and Next change the number by one:

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

The first card has nothing before it, and the last one nothing after it. The buttons show that with disabled, which you know from the Forms lesson: disabled={index === 0} for Previous. A disabled button can't be clicked, so index never leaves the deck.

Between the buttons, the app shows where you are, such as 3 / 12. You don't need any new state for that: it's computed while rendering, from index + 1 (people count from 1) and words.length.

A card that stays turned over. Turn the first card over and click Next: the second card is turned over too. Why? React sees a Flashcard in the same place as before, only with other props, so it keeps the component and its state, flipped included. A key tells React which card it is, as in lists. When the key changes, React takes it as a different card and creates it again, with new state:

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

A typical mistake is to add useState(0) below the ifs, next to const card. The first render then calls fewer hooks than the next one, and React stops with the error Rendered more hooks than during the previous render. Put it at the top, with the other hooks.