Cannot assign to read only property 'property' of object '#<Object>'

Question

I have this problem.

With interface:

export interface IDevice {
  id: string,
  selected: boolean
}

creating instance by:

let newDevice: IDevice = {
  id: uuid4(),
  selected: false,
} as IDevice;

It gets added to array in recoil state, and in React used in a function where array has been retrieved with useRecoilState(). const [leftList, setLeftList] = React.useState<IDevice[]>([]);

Now it is being used in a handler for selecting the devices on a list control, here the error occurs:

...
leftList.map((item: IDevice) => {     
      if (item.id === event.dataItem.id) {
        item.selected = !item.selected;
      }
      return item;
    })
...

And I get the error: Cannot assign to read only property 'selected' of object '#'

Even cloning the array first by [...leftList] does not help.

I'm lost:-) Hope someone can spread light on this?

State shouldn't be modified directly, which is what TS is trying to tell you by making your object read-only, create a new object and return that instead return {...item, selected: item.id === event.dataItem.id ? !item.selected : item.selected}. Cloning the array using the spread syntax will only do a shallow copy, and won't do a deep-copy of the objects within it — Nick Parsons
– Nick Parsons, Commented Feb 9, 2021 at 9:59

3limin4t0r · Accepted Answer · 2021-02-09 13:53:08Z

7

State shouldn't be modified directly, which is what you're currently doing now in your .map() method by updating the objects. TS is trying to tell you not to do this by making your objects read-only.

Instead, you can create a new object with all the properties from item (done using the spread syntax ...), along with a new overwritting property selected, which will use the negated version of the item's currently selected item if the id matches the event's data item id, or it'll keep the original selected value:

leftList.map((item: IDevice) => ({
  ...item, 
  selected: item.id === event.dataItem.id ? !item.selected : item.selected
}))

Cloning the array using the spread syntax ([...leftList]) will only do a shallow copy, and won't do a deep-copy of the objects within it, as a result, modifying the object references within .map() is still modifying the original state.

Or, instead of spreading the item object and creating a new object each time (which can hinder performance a little as pointed out by @3limin4t0r), you can instead only return a newly created object when you want to modify the selected property:

leftList.map((item: IDevice) => {     
  if (item.id !== event.dataItem.id) return item;
  return {...item, selected: !item.selected};
});

edited Feb 9, 2021 at 13:53

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

answered Feb 9, 2021 at 10:56

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

3limin4t0r Over a year ago

Note that this solution isn't the best for performance since you create a new object for each element within the array, even if that element does not change. You could add a guard clause to resolve this if (item.id !== event.dataItem.id) return item then create the copy with changes below that.

Collectives™ on Stack Overflow

Cannot assign to read only property 'property' of object '#<Object>'

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related