React state cannot be changed

Question

React this become undefined after a function is called by a component, before the this is not undefined. I cannot change the state.

export default class Chart extends React.Component {

   constructor(props) {
    super(props);
    var obj=JSON.stringify(this.props.data);
     this.state={data: obj};
   }

   insert(){

     //here it shows undefined
     console.log(this)
     var json=JSON.parse(this.state.data);
     //...
   }

   render() {
     //here shows non-undefined this
     console.log(this)
     return(
     //...
      //here calls the fuction that causes the error
     <button className="btn" onClick={this.insert}>Add New</button>
     </div>
     //...
     );
   }

Here is the error

Uncaught TypeError: Cannot read property 'state' of undefined
at insert (Chart.js:72)

Use ES6 function, here's working example https://codesandbox.io/s/8kxoj8j1xl — Shrroy, Mar 20 '18 at 13:36

score 1 · Accepted Answer · answered Mar 20 '18 at 13:22

1

You are losing scope here:

onClick={this.insert}

Just do

onClick={() => this.insert()}

to preserve it.

answered Mar 20 '18 at 13:22

Jonas Wilms

106,571
13
98
120

React state cannot be changed

1 Answers1