Конец игры

Последний шаг: конец игры.

• У последнего вопроса тоже есть кнопка Следующий вопрос. Если нажать её там, игра заканчивается: счёт, вопрос и варианты ответа уступают место результату, Правильных ответов: 3 из 4., в абзаце с классом result, с числами игрока.
• Под результатом кнопка Сыграть ещё раз начинает игру заново: снова первый вопрос, ничего не выбрано, а счёт опять 0.

Подсказка: после последнего вопроса индекс равен questions.length, то есть на единицу больше последнего индекса массива, а questions[index] — это undefined. Вот тогда и нужно показать конец игры: if с ранним return, до того как что-либо прочитает текст вопроса. Строки с useState оставьте выше этого if: React требует, чтобы они выполнялись при каждой отрисовке и в одном и том же порядке.

Это весь проект. В вашей викторине три части состояния: индекс вопроса, выбранный ответ и счёт. Всё остальное — сообщение о результате, отключённые кнопки, кнопка «Следующий вопрос» и финальный экран — вычисляется из них при отрисовке. Чтобы добавить вопрос, достаточно добавить объект в questions.js: попробуйте. В следующем уроке, «Общее состояние», в ваших приложениях будет несколько компонентов, которым нужно одно и то же состояние, и вы увидите, где оно должно жить.