Espero que el título tenga sentido, es un poco confuso.
He construido una herramienta de prueba para el aprendizaje de idiomas. Tiene una variedad de componentes y, a medida que los usuarios responden correctamente las preguntas, avanza a las siguientes preguntas. Esto funciona bien (y está disponible aquí: https://comhradh.netlify.app/quiz ), pero actualmente la lista de preguntas existe dentro de ese componente, y quiero poder llamarlo en diferentes lugares, pasándole un diferente variedad de componentes de preguntas cada vez.
Lo que he intentado hasta ahora es esto: tengo tres componentes: un abuelo, un padre y un niño. El abuelo, "Lesson.js", llama al padre, "Quiz.js", que a su vez extrae elementos del componente secundario, "TestComponents.js". Quiz.js toma como accesorio una matriz de questions , con un montón de componentes que todos son representados por el componente TestComponents.
Sin embargo, necesito cada uno de los objetos en la matriz de questions para seleccionar un accesorio handleCorrect de Quiz.js, el componente principal, que no existe en Lesson.js, el abuelo.
Te mostraré lo que quiero decir:
Abuelo - Lesson.js llama a esto:
<Quiz questions={[ <Qtranslate1 Q="Tha mi beag" A={["I am small", "I'm small"]} handleSubmit={true} header="default" />, ]} />Pero en Quiz.js, hay una función handleCorrect:
const handleCorrect = () => { setIndex((prevIndex) => prevIndex + 1); };Que está destinado a revisar cada una de las preguntas que se pasan al componente Quiz.js a medida que el usuario las completa. Debido a que la función handleCorrect() solo existe en Quiz.js, no puedo pasarla como apoyo a los objetos de los componentes cuando inicialmente los paso como apoyo al componente Quiz.js.
En mi primera versión, donde la matriz de preguntas solo existía como una constante dentro de Quiz.js, cada una de ellas tomaba este argumento: handleCorrect={() => handleCorrect()} , que funcionaba bien.
He intentado pasar las preguntas al componente Quiz sin un accesorio handleCorrect, y luego revisarlas en el mapa y agregarlas una vez que están en el componente Quiz, pero aparece este error:
TypeError: Cannot add property handleCorrect, object is not extensible¿Hay alguna forma de hacer esto?
Lo que está tratando de hacer es cambiar los objetos que provienen de los accesorios (Grand Parent). No es posible. En su lugar, puede copiar en profundidad la matriz y manipular la matriz y enviarla al componente secundario.
Puede hacer esto mientras monta el componente Quiz.
useEffect(() => { var tempQuestions = props.questions tempQuestions = JSON.parse(JSON.stringify(tempQuestions)) /* You can now manipulate this data and send it across child components */ },[])