Quiero crear formularios dinámicos, tiene nombre, descripción y múltiples secciones, cada sección tiene múltiples preguntas, cada pregunta tiene múltiples opciones. cuando hago clic en algunos botones, debería crear elementos de formulario dinámicamente. Por ejemplo, primero introduzco detalles para el nombre, las secciones de descripción. Después de ingresar los detalles de la pregunta cuando guardé la pregunta, abra un nuevo formulario e ingrese otras preguntas. Después de guardar las preguntas, quiero agregar una nueva sección como resultado de la matriz ob de la estructura. Es dinámico cuando guarda una pregunta o sección, crea otra pregunta o sección.
const [data, setData] = useState([ { name: "", desc: "", sections: [ { sectionName: "", sectionDesc: "", questions: [ { questionType: "", questionText: "", options: [], answer: "", }, { questionType: "", questionText: "", options: [], answer: "", }, ], }, { sectionName: "", sectionDesc: "", questions: [ { questionType: "", questionText: "", options: [], answer: "", }, { questionType: "", questionText: "", options: [], answer: "", }, ], }, ], }, ]);Por ahora, creé una matriz simple, pero quiero que sea tan dinámica como la explicación.
const [data, setData] = useState([ { name: "", desc: "", sections: [ { sectionName: "", sectionDesc: "", questions: [ { questionType: "", questionText: "", options: [], answer: "", }, ], }, ], }, ]);Necesito la función handleChange y addFields en campos específicos, compartir enlaces sería genial. Gracias.
para handleChange, la forma más limpia es usar loadash
const [data, setData] = useState([ { name: "", desc: "", sections: [ { sectionName: "", sectionDesc: "", questions: [ { questionType: "", questionText: "", options: [], answer: "", }, ], }, ], }, ]); const handleChange = (path, value) => { setData(_.set(data, path, value)); }; useEffect(() => { handleChange("[0].sections[0].questions[0].answer", "A"); handleChange("[0].sections[0].questions[1].answer", "A"); }, []); console.log(data);insertar datos en campos específicos:
setData((prevState) => [ ...prevState, { name: "", desc: "", sections: [ { sectionName: "", sectionDesc: "", questions: [ { questionType: "", questionText: "", options: [], answer: "", }, ], }, ], }, ]);