Result Component

Learn about ternary operators and understand how to use ternary to show confetti.

Add the result card component

After the user has completed all the questions, we display the points they earned and the Restart button, which allows them to restart the quiz. We also add confetti to the function, as seen in the preview of this app. We display the confetti if the user scores more than seven points.

We use an npm package called react-confetti to add confetti to our application. To install this, we run the following command in the terminal:

npm i react-confetti

Note: This step has already been done here.

After installing the package, we can add it into our application using the following import command:

// Import
import Confetti from "react-confetti";

The following code provides an example of how to import the confetti package:

Get hands-on with 1200+ tech skills courses.