I want to create dynamic forms, it has name, desc and multiple sections, each section has multiple questions, each question has multiple options. when I click some buttons, it should create form items dynamically. Such as, firstly I enter detalils for name, desc sections. After I enter details fo question when I saved question it open new form enter another questions. After saving questions, I want to add new section as result structure ob array would like this. It is dynamic when you save question or section, it create another question or section.
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: "",
},
],
},
],
},
]);For now, I created simple array, but I want to this as dynamic as it like the explation
const [data, setData] = useState([
{
name: "",
desc: "",
sections: [
{
sectionName: "",
sectionDesc: "",
questions: [
{
questionType: "",
questionText: "",
options: [],
answer: "",
},
],
},
],
},
]);I need handleChange function and addFields in specific fields, sharing links would be great Thank you.
for handleChange the cleaniest way is using 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);
inserting data in specific fields:
setData((prevState) => [
...prevState,
{
name: "",
desc: "",
sections: [
{
sectionName: "",
sectionDesc: "",
questions: [
{
questionType: "",
questionText: "",
options: [],
answer: "",
},
],
},
],
},
]);