Import Result

Import the result component

We created a component called Result in the previous lesson. We must now import the component, pass the props, and include the restartHandler function.

Create the restartHandler function

As we learned earlier, this function changes the values of setQuizFinished to false, setScore to 0, and setCurrentIndex to 0. Here’s how we create the function:

 // Restart Handler
const restartHandler = () => {
   setCurrentIndex(0);
   setQuizFinished(false);
   setScore(0);
};

Add the Result component

The properties will now be sent to the Result component. When passing the props, always remember to use the same name as we did in the previous lesson.

 <Result
    score={score}
    restartHandler={restartHandler}
    questions={questions}  
/>

Because there are two components, one being the QuestionCard and the other being Result, we want the Result component to appear only once the quiz is completed. So, as we did in the previous lesson, we’ll use the ternary operator here.

{quizFinished ? (
  <Result
    score={score}
    restartHandler={restartHandler}
    questions={questions}
  />
) : (
  <QuestionCard
    index={currentIndex}
    question={questions}
    onAnswer={onAnswer}
  />
)}

The Result component becomes visible when the quizFinished property is true.

We get the following code by combining all of the code snippets: