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> ))}
Advertisement
Answer
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 });