Posts Learn Components Snippets Categories Tags Tools About
/

How to Bind Event Handlers in React JS Component by Avoiding Constructor Declaration

Learn how to bind event handlers in React JS component constructer the easy way

Created on Mar 22, 2022

92 views

To bind event handlers in React JS component you can easily define arrow functions, by making use of this method you will be accessing the same context in the component. 
import React from 'react';

class Toggle extends React.Component {
  state = { name: 'Hello dad' };

  render() {
    return (
      <button onClick={ this._handleButtonClick }>
        Greet Dad
      </button>
    );
  }

  _handleButtonClick = () => {
    console.log(`Message: ${ this.state.name }`);
  }
}

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)