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.