Event handling in react

Photo by Manuel Rheinschmidt on Unsplash

What is this bind? Do we need that? Yes but if you hate you can use arrow functions.

In react there are many ways of handling events. Let’s first consider class components and then move to functional components.

• Using Basic Java script functions.

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment() {
    console.log("text");  
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
export default App;

Wow it’s working and it will appear “text” when clicking Increment. Check once it changes a state as follows.

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment() {
    this.setState({ count: this.state.count + 1});
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
export default App;

Ohh Error!!!

This is happen because this increment method finds setState function in render scope.There are several things that you can do for this. One is binding the method to the component as follows. Which will set the increment scope to the component scope as follows.

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };    
    this.increment = this.increment.bind(this);
  }
  
  increment() {
    this.setState({ count: this.state.count + 1});
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
export default App;

• Using an arrow function when calling.

Arrow functions default set scope as component scope hence using arrow function when calling can be used to omit the binding scenario as follows.

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };    
  }
  
  increment() {
    this.setState({ count: this.state.count + 1});
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}
export default App;

• Convert the function to arrow function.

import React, { Component } from "react";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };    
  }
  
  increment = () => {
    this.setState({ count: this.state.count + 1});
  };
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
export default App;

If you need better understanding about life cycle methods read the following article.

React Life Cycle Methods

Pass parameters to the function.

• Without using arrow function in function calling

In this scenario we have to bind the inputted parameters as follows to input to the function.

<button onClick={this.increment.bind(this, Math.random())}>
  Increment
</button>

• With using arrow function calling.

<button onClick={() => this.increment(Math.random())}>
  Increment
</button>

Execute multiple functions from same event.

There is two ways of doing which are either wrap multiple functions in one function and call it or call three functions using arrow function.

• Wrap multiple functions to a single function.

wrapped = () => {
  func1();
  func2();
  func3();
}
<button onClick={() => this.wrapped()}>
  Increment
</button>

• Using a single arrow function.

<button onClick={() => {
  func1();
  func2();
  func3();
}}>
  Increment
</button>

Hopefully this is helpful.

If you have found this helpful please hit that 👏 and share it on social media :).