Create a Quiz using React

share link

by vsasikalabe dot icon Updated: Apr 6, 2023

technology logo
technology logo

Solution Kit Solution Kit  

You can create a quiz and give it a name, then add questions and their answers to the quiz. You can take the quiz in random or normal order when you are done. This is used when someone tests or knows your knowledge by asking questions. This is also used in a game or competition.  

The process of our task has given below: 

  • The next question should show when the user clicks a button. 
  • It should increment their score If the user gets the question correct. 
  • The total score should be shown if the user reaches the quiz's end. 

We want to use a state object for holding which question the user is on and update this if an answer button is clicked. And also, add a state object that will hold the present question number the user is working on. This will be initialized to 0, letting the quiz take the first question from the array.


How useState works in ReactJS while keeping track of active questions, selected answers, and results. 

  • We have to add classes to highlight the answer user conditionally has selected. 
  • For the last question, we will change the button name from Next to Finish and display the result to the user. Add zero if the question number is less than 10. 

Benefits of quiz 

  • Quizzes are good for revision 
  • Quizzes can help to track 
  • Quizzes encourage pupils' self-awareness of the progress and self-assessment 

Here is an example of how to create a Quiz using Reactjs: 

Preview of the output that you will get on running this code from your IDE.


In this solution we use the React library.


Follow the steps carefully to get the output easily.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Open the folder in IDE.
  5. Copy the code using "copy" button above and create quizzes.js file and paste the code till 10 to quizzes.js file(you can add more questions).After that create quiz.js file and paste the remaining code to that file(refer DEMO for additional files).
  6. Import React and all supporting files.
  7. Open the terminal from IDE.
  8. npm start to run the file.

You can also refer this url DEMO for getting the above output.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for Create a Quiz using React in kandi. You can try any such use case!

Environment Tested:

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. The solution is tested on Nodejs 16.14.2 version.
  3. react 18.2.0 version.

Using this solution, we are able to create a Quiz using React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create a Quiz using React.

Dependent Libraries

create-react-appby facebook

JavaScript doticonstar image 100082 doticonVersion:v5.0.1doticon
License: Permissive (MIT)

Set up a modern web app by running one command.


            create-react-appby facebook

            JavaScript doticon star image 100082 doticonVersion:v5.0.1doticon License: Permissive (MIT)

            Set up a modern web app by running one command.

                      You can search for any dependent library on kandi like react.


                      1. For any support on kandi solution kits, please use the chat
                      2. For further learning resources, visit the Open Weaver Community learning page.

                      See similar Kits and Libraries