Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

254
Views
How do I map state into a component as a prop?

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>
)}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You should return the mapped element, as:

return (
    <div>     
        {quizData.map((item) => {
           return <div>
                <Question 
                    question={item.question}
                    answers={item.answer}
                    chosenAnswer={quizData.selectedAnswer}
                    updateAnswers={handleSelectedAnswer}
                />
            </div>
        })}
  </div>
)

or

    return (
      <div>     
          {quizData.map((item) => (<div>
                     <Question 
                      question={item.question}
                      answers={item.answer}
                      chosenAnswer={quizData.selectedAnswer}
                      updateAnswers={handleSelectedAnswer}
                  />
              </div>
    ))}
    </div>
  )

Update it in both the maps

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!