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>
))}>Solution :
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 });