Home / Snippets / How to Bind Event Handlers in React JS Component by Avoiding Constructor Declaration
How to Bind Event Handlers in React JS Component by Avoiding Constructor Declaration cover

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

208

2 years ago

0 comments

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 }`);
  }
}
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

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

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this