React Quiz App Tutorial (w/ starter code + working example) | Beginner React Projects

In this beginner react project we'll look at how to build a quiz app using React hooks.

Run the STARTER CODE:

2) cd quiz-app/starter
3) npm install
4) npm start

Run the FINISHED CODE:

2) cd quiz-app/final
3) npm install
4) npm start

What we'll learn:
- Managing complex state objects
- Conditionally rendering elements
- Working with multiple state hooks to create a dynamic UI

COME SAY HI:

This is a new channel so would love your feedback in the comments.

Don't forget to like, share, and subscribe! Thanks for watching!

[lacheporter]

Spoilers!!! this is how I made my reset button to reset state (extra credit).
Just create a function that sets the usestate value back to the orignal value.
I did name some variables differently. Hope this hint helps for those learning.

const [currentQuestion, setCurrentQuestion] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);

const resetStateClick =()=>{
setCurrentQuestion (0)
setShowScore(false)
setScore(0)
}
Put this button inside your score div
<button


For recording the score after hitting retry:

Add another constant:
const [recordedScore, setRecordedScore] = useState(0);

Put this in the resetStateClick from above.
setRecordedScore(score)

Add a div.
<div>
<p>Your Last Score: {recordedScore}</p>
</div>

[MohamadMohamad-pleb]

you are the only youtuber than i dont have to speed my video to watch you,
a lot of stuff with only 12 min, keep it up

[achtube]

Thanks for this! I learnt a lot! Subbed right away :)
I have to confess, though, that I found that, for a non-native English speaker like me, not only your accent is a bit challenging (although beautiful!) but also you speak quite fast, so for the first time ever while watching web dev toturials, I set the speed to x0.75 in order to have enough time to process better :)

[Screwfacecapone]

Nice! I tried it out for myself, and altered it to add additional questions and load them from a JSON doc. Thanks a lot!

[juguetestoys]

Hi, your video is great.
How can I put an Alert (this answer is incorrect, the correct answer is .... HERE SHOW THE CORRECT ANSWER")

[TopTalentBridge]

Hello chris,
I am not able to the logic of displaying the previous state please help me with it please share the code

[ahusyn]

I see you have a css class for .correct and .incorrect ready to show if the answer was correct or not, however I wanted to see how that could be implemented? once clicked on answer, where would that go?

[dubbsy_]

Awesome video man... how would you add in Fade-out / fade-in style transitions between questions?

[NotiCuriosidades]

Hi. Great video. A couple of questions. Is it possible to display the questions and answers randomly? 2. Is it possible to see the questions and correct answers at the end? I.e. see all the questions along with the correct answers.

[andresramirez]

i did my own quiz, (Similar to yours but i used form and split up components, and used radio buttons) but when i was trying to do the score i had so much trouble getting it to increment the score. Until i looked at your video. I dont see how putting in answerOption.isCorrect as an argument at the handleAnswerButtonClick would make it work. Could you explain that or somebody else on here?

[lucianolimafer]

Liked and subscribed. Thanks for this tutorial awesome!!!

[turgutguvercin]

There are 8 books in the Harry Potter Series.

[santra]

Thanks Chris for the turtorial. I am new to Angular and I was building quiz app using Angular and I was not sure
how to go about the logic to calculate the score. Watching this video I was able to implement the logic
in my quiz app using Angular. Thanks again!

[AminSani]

That was very useful, Thank you so much

[yuvanhanwat]

If we want to show all questions in only one page then what should be the changes in this code. Please help.

[musadanjuma]

Liked and Subscribed immediately, thanks for this tutorial, it is exactly what I was looking for...

[anasssanba]

i'm so happy it's my first time doing that quiz app haha it's look the same as yours xD

[dimasaaron]

Thanks for video, Very useful & GBU Chris.

[Bep]

Great vid! How would you make the correct option turn green to show the user they got the answer right?

[replayzor]

This is so easy too bad you don't make them anymore they are so helpfull Thanks