Binding methods using the constructor versus using arrow functions

In this recipe, we are going to learn the two ways of binding methods in React: using the constructor and using arrow functions.

 

How to do it...

This recipe is straightforward, and the goal is to bind a method using the class constructor and using arrow functions:

1. Let's create a new component called Calculator. We will create a basic calculator with two inputs and one button. The skeleton of our component is as follows:

import React, { Component } from 'react';
import './Calculator.css';

class Calculator extends Component {
constructor() {
super();

      this.state = {
number1: 0,
number2: 0,
result: 0
      };
    }

render() {
return (
        <div className="Calculator">
          <input 
            name="number1" 
            type="text" 
            value={this.state.number1} 
          />
          {' + '}
          <input 
            name="number2" 
            type="text" 
            value={this.state...