Bug: TriviaQuiz component persisting on gameOver

[crooks-s]

Bug Description

When the trivia game ends, <GameOver /> is rendered, but <TriviaQuiz /> still persists.

How to Reproduce

• Download React Dev Tools - Google Chrome extension or another extension that allows you to view the components currently rendered in a React app.
• In Chrome Dev Tools, navigate to the Components tab.
• Start and complete the trivia game, but do not click "Play Again?"
• On this page, observe the currently rendered components which should be App, GameOver, and TriviaQuiz, pictured below.

Expected Behavior

Only <GameOver /> should render in the application's current state as there is no need for <TriviaQuiz /> once the game ends.

Solution

In the App component, we can fix the ternary JSX expression using the following code block:

{!gameOver ? (
  !startTrivia ? (
    <TriviaSetup
      topic={topic}
      setTopic={setTopic}
      questionCount={questionCount}
      setQuestionCount={setQuestionCount}
      generateQuiz={generateQuiz}
    />
  ) : (
    <TriviaQuiz
      currentQuestionIndex={currentQuestionIndex}
      setCurrentQuestionIndex={setCurrentQuestionIndex}
      questions={questions}
      setGameOver={setGameOver}
    />
  )
) : (
  <GameOver />
)}