Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

255
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda