Reactjs – Error Message : Type Error: Cannot read property 'count' of null Inside React

When you call handleClick from the <button />‘s onClick event, it loses its reference to the component’s instance, resulting in the this keyword pointing to null instead of the component instance.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };

    // Bind the handleClick method to the component instance
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

By binding this.handleClick to the component instance, you make sure that the this keyword inside the handleClick refers to the component instance, allowing you to access this.state.count (or better this.state) properly.

You also could use an arrow function.

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;

The arrow function automatically "captures" the this value from the component instance. Because of that, you can access this.state.count (or better this.state) within the handleClick function.