Unable to access React instance (this) inside event handler [duplicate]

Answer 1

My recommendation is use arrow functions as a properties

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      
    );
  }
}

and do not use arrow functions as

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          {this.handleClick}}>
        );
      }
    }

because second approach will generate new function every render call in fact this means new pointer new version of props, than if you will later care about performance you are able use React.PureComponent or in React.Component you can override shouldComponentUpdate(nextProps, nextState) and shallow check when props arrived