How to Change the State Correctly (Read-Only Error)

How to change the state correctly? (read-only error)

Instead of page += 1 use page + 1. Your state should be immutable, so you should never use = operator when you update your state. You should update it with brand new value each time you do it. This should save you a lot of time during development.

ReadOnly state when I need to change it

• setState() only takes effect after the whole eventHandler is
  finished, this is called state batching.

• Your this.setState({playButton:!playButton}) only run after handleMClick() is finished.

• In other words, playButton === true will not available within your handleMClick() function.

On solution could be to put this:

playButton ? document.getElementById("player").play() : document.getElementById("player").pause() 

Inside a componentDidUpdate() so it will take effect in the next render after your state is updated.

How to update nested state properties in React

In order to setState for a nested object you can follow the below approach as I think setState doesn't handle nested updates.

var someProperty = {...this.state.someProperty}
someProperty.flag = true;
this.setState({someProperty})

The idea is to create a dummy object perform operations on it and then replace the component's state with the updated object

Now, the spread operator creates only one level nested copy of the object. If your state is highly nested like:

this.state = {
   someProperty: {
      someOtherProperty: {
          anotherProperty: {
             flag: true
          }
          ..
      }
      ...
   }
   ...
}

You could setState using spread operator at each level like

this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: false
            }
        }
    }
}))

However the above syntax get every ugly as the state becomes more and more nested and hence I recommend you to use immutability-helper package to update the state.

See this answer on how to update state with immutability-helper.

React JS V17.0.0: Cannot assign to read only property 'color' of object '#<Object>'

You can not use static variables to change virtual DOM.

use useState to change your color.

https://stackblitz.com/edit/react-qkmqcu?file=src%2FApp.js

Explanation

as I told you, you specified read-only const in DOM and you can not mutate it, whenever you click on the button, you must need to rerender your virtual DOM and for that, you must to assign your color into state and error also tells that you can not assign anything that changeable ( means its read-only )

Local copy of React prop is read-only

Object.assign only does a shallow copy of the prop Object.assign Reference. In order to make a true deep copy of the prop (and get rid of the error) you can do a deep copy with newStuff: JSON.parse(JSON.stringify(stuff)). Glad this helped!

The real reason behind this is given in an example:

let original = {
    name: 'Test',
    nestedObj: {
        (...some properties)
    }
}

In the example above, the original object property 'name' is a new copy but the nested object is still a reference to the original. This way when you try and edit the part of the nested object it references the original and yells that it is immutable.

TS2740 Type is missing the following properties from ReadOnly<MyInterface> error in React Native with TypeScript app

I finally solved the problem by changing the declaration of the class to class MyComponent extends React.Component<any, MyInterface>.

---

Related Topics