How to create dynamic forms in React. There are some dynamic fields inside of dynamic fields

user_15533163 0
Viewed 29

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.

react-state-management reactjs object arrays javascript
1 Answers

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: "",
            },
          ],
        },
      ],
    },
  ]);
user_40723060
Related