React: How to read state from within handler function?

March 17, 2022

I’m new to React working on an existing React component (that appears to be built in an older style – no hooks).

I want to read and set state within a handler function. I have the following code:

export default class MyComponent extends React.Component { 

static defaultProps = {
    data: {}
};

constructor(props) {
     super(props);

     // Other states

     this.state.myState = false;
};

handleMyChange() {
    if (!this.state.myState) {
        console.log("hello world");
    }
}

However I get the error Cannot read properties of undefined.

I’ve tried various like state.myState but am not really sure what I should be doing.

Can anyone point me in the right direction?

>Solution :

In order to have this context in your function, you will need to bind it in the constructor first

Here is a small example is taken from the official doc:

import React from "react";

export default class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: "Hello!" };
    // This line is important!
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // Because `this.handleClick` is bound, we can use it as an event handler.
    return <button onClick={this.handleClick}>Say hello</button>;
  }
}