TypeError: Cannot assign to read only property of object ‘#Object’ reactjs

The issue:

In ReactJS application when we tried to overwrite a component’s property inside that component then we got into the following issue:

TypeError: Cannot assign to read only property 'data' of object '#Object'


We were trying the following line:

   this.props.data = [];

The solution:

As of ReactJS version (16.8.6) the component attributes or properties are read only. The properties can be used in the component and passed to child components but re-assign is not possible.

As soon as we removed the above line the error goes away.

Component has another object called state. The state object is private to component. The state object can be modified. The component re-renders if it finds any change on the state object. This re-render is handled by react itself. The only we can set the state of a react component by using setState method.