React quiz app
I'm currently working on a quiz app for a Scrimba project but I'm a bit stuck on how to proceed. Right now, my app can fetch data from the API and display them on the page. However, I'm not sure how to make only one button active per question or how I should manage state for user selections (would this go in <App /> or in the component that's rendering the quiz questions?). Hopefully this made sense and I would appreciate it if anyone could take a look and offer some suggestions.
https://codesandbox.io/s/quizzical-nqjq39
savvystrider
CodeSandbox
quizzical - CodeSandbox
quizzical by savvystrider using html-entities, loader-utils, react, react-dom, react-scripts, uuid
7 Replies
Hold the selection in a state and then make whichever option selected highlighted. Also for things like this use radio buttons because you want only 1 thing selected
I tried the radio button approach but it got a little tricky for me managing
name, value, and checked attributes for those elements. But it does seem to be preferable to using regular buttons for thisIt is worthwhile going the radio button route
Refactored my code a bit to use a form/radio buttons but I'm running into trouble with
checkAnswers function. Would appreciate it if anyone has the time to take a look and offer any suggestions: https://codesandbox.io/s/quizzical-nqjq39savvystrider
CodeSandbox
quizzical - CodeSandbox
quizzical by savvystrider using html-entities, loader-utils, react, react-dom, react-scripts, uuid
I logged what was being compared with
console.log({ answers, selectedChoice, correctChoice }) and you should have stored the index in answers
Does that mean
answers needs to be converted from an array into an object in order to hold the index?No, an array of indices