Use the QuestionCard Component
Explore how to import and use the QuestionCard component within a ReactJS quiz app. Understand passing props like index, questions, and the onAnswer method, alongside using useState to track current question, score, and quiz completion. Gain skills to handle dynamic question flow and state updates in React.
Using the QuestionCard component
We must import the QuestionCard component into the App.js file to use it. Import the component as shown in the following code snippet:
import QuestionCard from "./QuestionCard/QuestionCard";
The index prop provides the value of the question number to display at the top of the question. As we learned earlier, we passed three different props in our QuestionCard component.
Pass the index as a prop
The index prop provides the question number’s value that’s displayed at the top of the question. We also use this index number in the onAnswer method to show the following question when the previous one is answered. We use the useState ...