Hey for some reason my questions aren’t being rendered. I feel my issue may be with my QuizData.map but I can’t tell what the issue is because I can console.log console.log(quizData.map(item => item.question)) and get the results.
Any clue as to what may be causing this issue? Thank you!
Parent Component
export default function QuizData() {
const [quizData, setQuizData] = React.useState([{
question: "",
answers: "",
correctAnswer: "",
selectedAnswer: ""
}]);
React.useEffect(() => {
fetch("https://opentdb.com/api.php?amount=5&category=12&difficulty=medium&type=multiple")
.then(res => res.json())
.then(data => setQuizData(data.results.map(item => ({
question: item.question,
answers: item.incorrect_answers.concat(item.correct_answer),
correctAnswer: item.correct_answer
}))))
},[])
return (
<div>
{quizData.map((item) => {
<div>
<Question
question={item.question}
answers={item.answer}
chosenAnswer={quizData.selectedAnswer}
updateAnswers={handleSelectedAnswer}
/>
</div>
})}
<button
onClick={() => {
checkSelectedAnswer();
scoreQuiz();
finishQuiz()
}
}>
Check answers
</button>
</div>
)}
Child component
export default function Question(props) {
return (
<div>
{props.question.map(item => <h3>item</h3>)}
{props.answers.map((item, index) => {
<div key={index}>
<input
type="radio"
name={`answer option-${item}`}
id={`answer-options-${index}`}
value={props.chosenAnswer}
onChange={props.updateAnswers}
/>
<label htmlFor={`answer-options-${index}`}>{answerOption}</label>
</div>
})}
</div>
)}