Cannot assign to read only property of #<Object> using React with Recoil

Question

I'm trying to update my state (an array of objects), but get the above error whenever I try to use.map or edit a clone of the state object.

  React.useEffect(() => {
setUserMeasurements((oldUserMeasurements) => {
  return oldUserMeasurements.map(nameAndMeasure => {
    if (nameAndMeasure.name === name) { nameAndMeasure.measure = 60 }
    return nameAndMeasure;
  })
})

})

It doesn't seem to like it when I try the "nameAndMeasure.measure = 60" section of code, but I can't understand why. Can anyone explain?

Answer 1

I found that I could use this function to do what I was trying to get.map to do:

function replaceItemAtIndex(arr, index, newValue) {  return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)]; }

The.slice methods seem to create a new array, which satisfies javascript in a way that.map doesn't.