Note: This challenge is gone from the updated React courses on Scrimba. The web archive version of this challenge also does not work.
- Originally tried to use radio buttons for answer choices
- Mapping an answers array to render a radio button - didn't really mix and I didn't find any examples where this was done so I abandoned that idea
- Shuffled answer choices with code found on Stack Overflow
- Answers and questions have html-code in them - looked at some other attempts on Github and found a decode function
- In question, used code equivalent to a nested ternary to conditionally render the styles
- Didn't conditionally render correct answer
- Obviously, the idea was to add more conditional rendering practice but since questions repeat on some categories frequently, it may be a positive to not show the correct answer.
- Didn't style the app as the logic was not as solid as I would have liked
- handleChoice has way too much logic in it but the overly complicated data structure I started with and worrying about mutating state necessitated it
- Also performance wise - handleChoice is terrible
- Updating nested state is still a major disadvantage of React ie callback-esque hell
- Really hard to tell if you mutated state or not from just looking at the code
- After screenshots were taken, added a break after question to break it up
- I duplicated components when making breaking changes - they are the all copy files
- Two Screens (start & questions)
- Pull 5 questions from the OTDB API
- Tally correct answers after "check answers" is clicked
- Styled & Polished
- Stack Overflow - Randomize array
- Pluralsight - radio buttons & react
- Stack Overflow - radio buttons & react
- Stack Overflow - radio buttons
- Stack Overflow - pass multiple values of selected radio button in react
- Blog - avoid state for computed properties
- Geeks for Geeks - multiple inputs in react
- YouTube - ReactJS - Tutorial : How To Work With Multiple Radio Buttons with Function Based Components
- PreTagTeam - radio buttons
- Stack Overflow - redner array of inputs
- Stack Overflow - get key in js object by value
- YouTube - Dynamic Form Fields in React
- FreeCodeCamp - update state onclick
- TypeOfNan - useeffect
- Forum - encoding
- YouTube - React Quiz App tutorial
- Stack Overflow - updating state on click
- Stack Overflow - updating state when state is an array of objects
- Stack Overflow - setState
- Stack Overflow - updating state with hooks
- Stack Overflow - nested state & updating
- Blog - multiple classNames workarounds
- Stack Overflow - toggle onclick
- Stack Overflow - multiple functions onclick in react?
- Dev.to - nested ternary
- Github - decode function taken from here