Planning
The challenge to build a quiz app with React was part of Scrimba's React fundamentals course. This included building an app with React components, passing props, using fetch API, and conditionally rendering components. I made the project my own by fetching data that is only anime themed and styling the project to match that.
We were given a Figma file to start and have reference to while building the project. Here is the redesigned version I created so that my project could stand apart.
Development
Before anything else, I wanted to make sure my project functioned correctly before adding any styling. I started by organizing my components into a folder and naming them appropriatly so that the heirarchy is clear.
I found that this made it easier to divide the data into the proper components once I received it from the fetch API. The components I decided to use were Questions, Answers, and Button. This way I could pass all the correct data into each component through props and organize the logic.
Results
The most challenging part of the project was getting the functionality of it to work as intended and to update the user UI so that they are aware of what answers they answered right and wrong. Another challenge I faced was correctly accessing the data that was saved to state when the app first renders.
I was able to update the UI by conditionally rendering the styles and classNames to the buttons only after the user has submitted their quiz answers. Combined with state the app returns the buttons with the appropriate styles that correspond with the user answer choices.
To be more specific about accessing my saved data, the data that was challenging for me to use was the options for each question. I soon learned that
the most logical way for my solution was to map through my state once again and save each question option into its own const that contained the set of
answers being propped into html buttons.
const answerOptions = props.answers.map((answer, index) => {
return (
<Button
index={props.index}
answer={answer}
toggleSelectedAnswer={toggleSelectedAnswer}
quizData={props.quizData}
userAnswers={props.userAnswers}
answerSelected={answerSelected}
results={props.results}
/>
)
})
Overrall, this was a huge learning curve for me that helped me solidify my fundamentals of React. It was very beneficial for me to map over data and use it in different components as well as the state of my app. I am proud of how this project came out and look forward to create more apps with React so that I can continue to challenge myself and learn other methods.