Game Over

Last step: the end of the game.

• The last question gets the Next question button too. Clicked there, it ends the game: the score, the question and its answers make way for the result, You got 3 of 4 right., in a paragraph with the class result, with the player's numbers.
• Below the result, a button Play again starts the game over: the first question again, nothing picked, and the score back at 0.

A tip: after the last question, the index is questions.length, one past the end of the array, and questions[index] is undefined. That's when to show the end instead: an if with an early return, before anything reads the question's text. Keep the useState lines above that if: React needs them to run in every render, in the same order.

That's the whole project. Your quiz keeps three pieces of state: the index of the question, the picked answer and the score. Everything else, the feedback, the disabled buttons, the Next button and the end screen, is worked out from them while rendering. Adding a question is now just adding an object to questions.js: try it. In the next lesson, Sharing State, your apps get several components that need the same state, and you'll see where that state should live.