Practice What's Left
The words you know don't need practice. In this exercise, the app shows only the cards you don't know yet, and when you know them all, it says so and lets you start over.
Which cards are left is computed, like the deck. filter() keeps the words whose id isn't in known:
const toLearn = deck.filter((word) => !known.includes(word.id));The card is then toLearn[index], and the position counts toLearn too: 1 / 9 means nine words left to learn. The score still counts the whole deck.
That changes what I know it does. When you mark a card, it drops out of toLearn, and the next card moves into its place, under the same index. So handleKnow() doesn't move on with handleNext() any more. If it was the last card, though, nothing moves into its place, so the app goes back to the first card:
function handleKnow() {
if (!known.includes(card.id)) {
setKnown((known) => [...known, card.id]);
}
if (index === toLearn.length - 1) {
setIndex(0);
}
}And when toLearn is empty, there's no card left to show. App then returns a different page, with a message and a Start over button, which empties known and goes back to the first card.
Instructions
Below deck, create toLearn as above, and use it instead of deck for the card, the position, the Next button and handleNext() (the score keeps deck.length). In handleKnow(), replace handleNext() with going back to the first card, as above. Click I know it: the position shows 1 / 11, and the card the next word.
Before the return with the cards, add another one: when toLearn.length is 0, return a main with the heading, <p className="done">You know all the words!</p> and a button Start over. Its handler handleStartOver() empties known and sets index back to 0. You'll see this page once you've marked all the cards.