How can I access the index inside array and update it without removing property and value inside the object?
const [data, setData] = useState({
commission: [{ commissionFor: "", commissionPercentage: "" }],
salary: [{ salaryFor: "", salaryPrice: "" }],
off: [{ offFor: "", offPercentage: "" }],
});
<Autocomplete
onChange={(e, value) =>
setData((data) => ({
...data,
["commission"]: {
...data[0],
["commissionFor"]: value || e.target.value,
},
}))
}
renderInput={(params) => <TextField {...params} label="Commission" />}
/>
Can be done like this
setData((data) => ({
...data,
commission: data.commission.map((c, index) => index === 0 ? {...c, commissionFor: value || e.target.value}: c)
}))
If you are mapping these data then after clicking of data send the index of that item using that index position of the 0