React JS — Ways of binding events

Photo by Alisha Hieb on Unsplash

What is binding?

Event Binding tells the browser that this function should be called whenever this event is triggered or in other words whenever the event is trigged the function which is bind with the event should be called.

Bind creates a new function that will have this set to the first parameter passed to bind().

An example of event binding in JS.

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}
var unboundGetX = module.getX;
console.log(unboundGetX()); 
// The function gets invoked at the global scope
// expected output: undefined
var boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

Normally how we bind event with function in React. Here we use bind() to bind the event with function, when the button is clicked callOnClick() will be called. Normally we binding things only in constructor.

import React from 'react';
class MyComponent extends React.Component {
 constructor(props) {
  super(props);
  this.callOnClick = this.callOnClick.bind(this);
 }
 callOnClick() {
  console.log("Button is clicked");
 }
 render() {
  return <button onClick={this.callOnClick}> Click me!</button>
 }
}

Binding with Arrow functions

An arrow function does not have its own this; the this value of the enclosing execution context is used.

However when you write onClick={this.callOnClick}, the function is not executed but its reference is assigned to the onClick function, which then later invokes it, causing this to be undefined inside the function as the function runs on the context of the window object.

// not recommended
import React from 'react';
export default class MyComponent extends React.Component{
 callOnClick = () => {
  console.log("Button is clicked");
 }
 render(){
  return <button onClick={this.callOnClick}>Click me!</button>
 }
}

Thats why we use this way. Now even though onClick={(e) => this.callOnClick(e)} works, whenever render is called a new function instance is created. In your case its easy to avoid, just by created the function callOnClick using arrow function syntax.

import React from 'react';
export default class MyComponent extends React.Component {
 callOnClick (e) {
  console.log("Button is clicked", e.target.name);
 }
 render() {
  return <button name="MyButton" onClick={(e) => this.callOnClick(e)}>Click me!</button>
 }
}

Binding Child component events with Parent component function

props is the only way you can bind parent component’s function with child component events.

import React from 'react';
export default class MyComponent extends React.Component {
 callOnClick = () => {
  console.log("Button is clicked");
 }
 render() {
  return <ChildComponent callOnClick={this.callOnClick} />
 }
}
class ChildComponent extends React.Component{
 render() {
  return <button onClick={this.props.callOnClick}>Click me!</button>
 }
}

If you like this article. click the applause button! 👏 Follow me on Github, Twitter, Facebook.