Estoy tratando de guardar los estados de los componentes secundarios en una matriz en el componente principal. La estructura es algo así: -

 <App> <Quiz /> <Quiz /> <Quiz /> <Quiz /> <Quiz /> </App>

Cada componente secundario de Cuestionario tiene un estado llamado selectedOption que contiene el valor de la opción seleccionada (botón en el que se hizo clic) . ¿Hay alguna manera de pasar todo esto a una sola matriz de estado en el componente principal <App /> ? Estoy tratando de guardarlos en una matriz para poder mapear sus valores más tarde y verificar si es igual a la opción respectiva en otra matriz que contiene las respuestas correctas (con la ayuda del índice).

Código

<Aplicación / >

 function App() { const [showMenu, changeMenu] = useState(true); const [correctAnswers, setCorrectAnswers] = useState(["", "", "", "", ""]) // i need to save them here const [quiz, setQuiz] = useState([]); function getQuiz() { fetch("my api key") .then((res) => res.json()) .then((data) => setQuiz(data["results"])); } function getValues(val) { console.log(val); //this was only for the purpose of debugging but didnt work as i wanted } React.useEffect(() => { getQuiz(); }, []); const renderQuiz = quiz.map((val) => { let question = decodeURIComponent(val["question"]); let correctAnswer = decodeURIComponent(val["correct_answer"]); let wrongOptions = val["incorrect_answers"]; let allOptions = []; wrongOptions.map((elem) => allOptions.push(decodeURIComponent(elem))); allOptions.push(correctAnswer); allOptions = shuffle(allOptions); return ( <Quiz question={question} options={allOptions} correctOption={correctAnswer} getValues={getValues} /> ); }); }

Una parte del componente <Quiz/>

< Cuestionario / >

 export default function Quiz({ options, question, getValues, correctOption, ...props }) { const [chosenOne, setChosenOne] = React.useState(); const [selectedOption, setSelectedOption] = useState(""); const [isCorrect, setisCorrect] = useState(false); const list = [...options]; function simplyPrintThis(x) { let val = x.value; console.log(val); setSelectedOption(val); setisCorrect(val == correctOption) }