I have a form and this is my code, If I have one action and status input field everything is ok, unless i add another by clicking the 'Add Action' button and try to type in it.
const handleActionChange = (e, index) => {
const { name, value } = e.target;
console.log(name,value)
let actions = [...formData.actions];
actions[index][name] = value;
console.log(actions)
setFormData({
...formData,
actions:[ ]
})
}
const addAction = () =>{
setFormData({ ...formData, actions:[...formData.actions, {description: '',type:'', status: ''}] })
// console.log(formData)
}
and here is my form
{formData.actions.map((act, index)=>{
return (
<div key={index}>
<TextField
label="Action"
name="description"
value={act.description}
onChange={(e) => handleActionChange(e, index)}
margin="normal"
variant="outlined"
autoComplete="off"
fullWidth
/>
<TextField
label="Status"
name="status"
value={act.status}
onChange={(e) => handleActionChange(e, index)}
margin="normal"
variant="outlined"
autoComplete="off"
fullWidth
/>
</div>
);
})}
<button onClick={addAction}>Add Action</button>
This is the error i get
Uncaught TypeError: Cannot assign to read only property 'description' of object '#<Object>'
