React Constructors

What is constructor?

The constructor is a method that is used for initializing the state of the object in the class. It calls automatically during the creation of an object in the class.

The concept of the constructor is also the same in the React. The constructor in a React component is called before the component is mounted. When you implement the constructor for a React component, you have to call the super(pros) method before any other statement. If you are not calling super(pros) method, this.props will be undefined in the constructor and can lead to bugs.

Syntax

Constructor(props){
super(props);
}

In React, there are mainly two purposes for using the constructors:

1. It is used for the initialization of the local state of the component by assigning an object to this.state.
2. It is used to bind the event handler method, which occurs in your component.

If you are not initializing the state and not binding the methods for your React component, then it does not require implementing a constructor for a React component.

The setState() method cannot call directly in the constructor(). If the component requires to use local state, you have to use 'this.state’ to assign the initial state in the constructor. The only constructor uses this.state for assigning the initial state, and all other methods require to use set.state() method.

Example:

The example given below illustrates the concept of the constructor:

App.js

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Hello World'
    };
    this.handleEvent = this.handleEvent.bind(this);
  }

  handleEvent() {
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <h2>Example of React Constructor</h2>
        <p>{this.state.data}</p>
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

Main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App.js'; 
ReactDOM.render(, document.getElementById('app'));  

Output:

Arrow Functions

It is the new feature in the ES6 standard. If you apply arrow functions, it is not mandatory to bind any event to 'this' and also no need to bind 'this' inside the constructor.

Example:

In the above example, we have used bind(), but by using arrow function, we don't need it anymore. The following example is illustrating how to use arrow function in the program.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'Hello World'
    };
    this.handleEvent = this.handleEvent.bind(this);
  }

  handleEvent = () => {
    console.log(this.props);
  };

  render() {
    return (
      <div>
        <h2>Example of React Constructor</h2>
        <p>{this.state.data}</p>
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

Output:

There are some ways in which we can use the constructor that are as follows:

1. Use of 'this' inside the constructor

class App extends Component {
constructor(props) {
// when you use 'this' in constructor, super() needs to be called first
super();
// it means, when you want to use 'this.props' in constructor, call it as below
super(props);
}
} 

2. Initializing third-party libraries

class App extends Component { 
constructor(props) { 
this.myProgram = new MyProgramLibrary(); 
//Here, you can access props without using 'this' 
this.Program2 = new MyProgramLibrary(props.environment); 
} 
}  

3. The constructor is used to initialize the state.

class App extends Component { 
constructor(props){ 
// here, it is setting initial value for 'inputTextValue' 
this.state = { 
inputTextValue: 'initial value', 
}; 
} 
}  

4. Binding the context (this) when you require a class method to be passed in props to children.

class App extends Component {
  constructor(props) {
    // When you need to 'bind' context to a function
    this.handleFunction = this.handleFunction.bind(this);
  }
}

There are some questions related to constructors are as follows:

5. Is it mandatory to have a constructor in every component?

No, it does require having a constructor in every component. If there is not a complex component, it simply returns a code.

classAppextendsComponent{ render(){ return(

Name:{this.props.name}

); } }

6. Is it compulsory to call super() inside a constructor?

Yes, it is always required to call super() inside a constructor. If you have to set a property or access 'this' inside the constructor in your component, you require to call super().

For example:

Without using super(props)

The program given below will show you an error:

ReferenceError: Must call the super constructor in derived class before accessing 'this' or returning from derived constructor.

This happens because there is not any use of super(props).

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.fName = {
      name: 'Nikhil',
      age: 20,
      class: 'Fifth',
      subject: 'Computers'
    };
  }

  render() {
    return (
      <div>
        <h2>Name: {this.fName.name}</h2>
        <p>Age: {this.fName.age}</p>
        <p>Class: {this.fName.class}</p>
        <p>Subject: {this.fName.subject}</p>
      </div>
    );
  }
}

export default App;

With using super(props)

After inserting super(props), you will get your required output.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.fName = {
      name: 'Nikhil',
      age: 20,
      class: 'Fifth',
      subject: 'Computers'
    };
  }

  render() {
    return (
      <div>
        <h2>Name: {this.fName.name}</h2>
        <p>Age: {this.fName.age}</p>
        <p>Class: {this.fName.class}</p>
        <p>Subject: {this.fName.subject}</p>
      </div>
    );
  }
}

export default App;

Output: