React Constructor: The Complete Guide

In the React Initial State, we have seen that one use of constructor is to define the component’s initial state, which is very useful for any React.js application. React constructor is no different than the standard constructor. We can bind any event that occurs in our component in the constructor.

React Constructor

To create a constructor in react.js, use the constructor() method. The constructor can bind event handlers to the component and initialize the component’s local state. The constructor() method is fired before the component is mounted, and, like most things in React, you should follow a few rules when using them.

Syntax

See the syntax of the React.js constructor.

 constructor(props){
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
  }

In the snippet, the event will fire after the user has clicked the button or keyup, blur, or any other event, and then we need to set up the context to its parent and not the child context, so we are binding this to the parent. Let me take one example to simplify this explanation.

Example #1

// App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

In this example, I have taken one button, and when the user clicks the button, that triggered event call the function called handleEvent(). However, when you see it in the browser, the application gets a crash, and it has shown me like this.

So, here the problem is that this no longer works as a  global class object; it points to all the properties inside that called function. So, we need to make this a global application pointer on which we can call the props and state methods. To overcome the problem, write the following line in the constructor.

// App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
    this.handleEvent = this.handleEvent.bind(this);
  }
  handleEvent(){
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

The bind() function will get the job done because, at the starting point of our component, we bind this object to the global element, and it has all the props and state.

Example #2

We can also use the arrow function to eliminate the bind function like the following way.

// App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);
  }
  handleEvent = () => {
    console.log(this.props);
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

Here, arrow functions, which is the new feature of the ES6 standard is, correctly set the context of this to parent and not that particular function. So both will work the same.

So, we can achieve two purposes with the constructor function.

1. Set the initial state of the component
2. Point to the global context of this keyword.

That’s it for this tutorial.