How to create dynamic objects inside dynamic objects

Question

This is created another objects dynamically when you click a button. But I want to create new object inside questions Array when I click a button.

const [inputFields, setInputFields] = useState([
    {
      sectionName: "",
      sectionDesc: "",
      questions: [{ questionType: "", questionText: "" }],
    },
  ]);
const handleChange = (index: any, event: any) => {
    const values = [...inputFields];
    // @ts-ignore
    values[index][event.target.name] = event.target.value;
    setInputFields(values);
    console.log(index, event.target.name);
  };

const handleAddFields = () => {
    setInputFields([
      ...inputFields,
      {
        sectionName: "",
        sectionDesc: "",
        questions: [{ questionType: "", questionText: "" }],
      },
    ]);
  };

values[index][event.target.name] = event.target.value; this mutates the object in state. To add to the questions array, you need to know with object in the inputFields array first, then simply spread into the relevant questions array. — pilchard
– pilchard, Commented Aug 13, 2022 at 9:03
firstly, the state is array, when you click function handleAddFiedls, it create new objects in array. But I want to create objects inside questions Array without changing data inside objects in state for example: [ { sectionName: "", sectionDesc: "", questions: [{ questionType: "", questionText: "" }, { questionType: "", questionText: "" }], }, ] — Umarkhon
– Umarkhon, Commented Aug 13, 2022 at 9:07
It looks like you have a number of questions that all have useful answers that you haven't responded to. see: What should I do when someone answers my question?. Accepting an answer makes the question more useful to the general community by making it a valid duplicate target. — pilchard
– pilchard, Commented Aug 14, 2022 at 10:08

pilchard · Accepted Answer · 2022-08-13 09:29:49Z

1

First off, you are mutating state in your handleChange handler. You can avoid this using map()

const handleChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
  setInputFields(prev => prev.map((p, i) => (
    i === index
      ? {
        ...p,
        [event.target.name]: event.target.value
      }
      : p
  )));
};

As for adding to the questions array, you will need an index for which object you want to add to, then use the same technique as above to spread into that object.

const handleAddFields = (index: number) => {
  setInputFields(prev => prev.map((p, i) => (
    i === index
      ? {
        ...p,
        questions: [...p.questions, { questionType: "", questionText: "" }]
      }
      : p)
  ));
};

Note: Using any for all parameters defeats the purpose of typing, try to use relevant types to take advantage of the type system.

edited Aug 13, 2022 at 9:29

answered Aug 13, 2022 at 9:11

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create dynamic objects inside dynamic objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related