I have a nested array i add dynamically to my state and therefore i dont know the key/name of the nested array and I can not give the key/name of the nested array when i need to add, update, iterate or remove somethings in the array. An example is the function addClick

  const addClick = (event) => {
    // setValue({ event.target.name: [...value.(event.target.name)), ""] });
    setValue({ DevOps: [...value.DevOps, ""] });
  }; 

The comment contains the way i am thinking it should be. So instead of writing "DevOps" which is the key/name of the array, i want it to use the value of "event.target.name", but it will not use it. So how do i use the value when setting state of "value"??

other examples:

  const removeClick = (event) => {
    //let vals = [...value.(event.target.name))];
    let vals = [...value.DevOps];
    let index = Number(event.target.id);
    vals.splice(index, 1);
    // setValue({ event.target.name: vals });
    setValue({ DevOps: vals });
  };

{/*value.(input[form].name).map((el, i) => ( */ }
    {value.DevOps.map((el, i) => (
           <div key={i}>
           <Array
             name={input[form].name}
             placeholder={input[form].placeholder}
             required={input[form].required}
             key={input[form].placeholder}
             el={el}
             i={i}
             handleChange={(event) => handleChange(event, input[form].input_type)}
             removeClick={removeClick.bind(i)}
              />
             </div>
             ))}

CodePudding user response：

Close. Using a variable/expression/etc. as a property name in an object literal requires bracket notation:

setValue({ [event.target.name]: [...value[event.target.name], ""] });

or:

setValue({ [event.target.name]: vals });