React Constructors

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 ( 
  

Example of React Constructor
 
 



Please Click 
 
); 
} 
}  
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.

importReact,{Component}from'react'; classAppextendsComponent{ constructor(props){ super(props); this.state={ data:'HelloWorld' } this.handleEvent=this.handleEvent.bind(this); } handleEvent=()=>{ console.log(this.props); } render(){ return(

ExampleofReactConstructor

PleaseClick

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);
}
} 

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

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