My current code finds an object in a state array, removes it and then adds a newValue in its place. I know using .splice() mutates the state directly which is not a recommended practice in React. What is the proper way to do what I am trying to do below?
const found = clientServiceReferral.selectedTimeSlots.find(element => element.timeSlot === timeWithDate);
if (found) {
clientServiceReferral.selectedTimeSlots.splice(found, 1)
}
const newValue = {
timeSlot: timeWithDate,
value: value.value
}
setClientServiceReferral({
...clientServiceReferral,
selectedTimeSlots: [...clientServiceReferral.selectedTimeSlots, newValue]
})
I would use map method, which returns a new array, to find and replace:
const updatedTimeSlots = clientServiceReferral.selectedTimeSlots.map((element) => {
if(element.timeSlot === timeWithData){
return {timeSlot: timeWithDate, value: value.value}
} else {
return element
}
})
setClientServiceReferral({
...clientServiceReferral,
selectedTimeSlots: updatedTimeSlots
})