Tengo una aplicación de prueba en react.js. Cuando el componente Cuestionario envía los apoyos al componente Pregunta, al registrar las opciones en el componente Pregunta todavía dice indefinido.

Prueba:

 const Quiz = (props) => { const [options,setOptions]=useState(null); const [currentQuestion,setCurrentQuestion]=useState(0); useEffect(()=>{ var optionss=[]; optionss.push(props.questions[currentQuestion].correct_answer); props.questions[currentQuestion].incorrect_answers.forEach((ans)=>optionss.push(ans)); optionss.sort(()=>Math.random()-0.5); setOptions(optionss); },[props.questions]) return ( <div className='quiz'> <span className="subtitle">Welcome ,{props.name}</span> <div className="questionInfo"> <span>{props.questions[currentQuestion].category}</span> <span>Score : {props.score}</span> </div> <Question questions={props.questions} setQuestions={props.setQuestions} currentQuestion={currentQuestion} setCurrentQuestion={setCurrentQuestion} options={options} correctOption={props.questions[currentQuestion].correct_answer} /> </div> ); };

Pregunta:

 const Question = ({ questions, setQuestions, currentQuestion, setCurrentQuestion, options, correctOption, }) => { return ( <div> <h1>Question : {currentQuestion+1}</h1> <div className="singleQuestion"> <h2>{questions[currentQuestion].question}</h2> <div className="options"> {options.map((option)=>{ return( <button disabled={selected} key={option} onClick={()=>{}} className={`singleOption ${selected && handleSelect(option)}`} >{option}</button> ) })} </div> </div> </div> ); };

Además, al iterar a través de las opciones en el componente Pregunta, aparece un error: cannot read properties of null .