Constructor in ReactJS

React Constructor
The method used to initialize an object’s state and which is automatically called during the creation of an object in a class is known as a constructor in ReactJS. It is called before the component is mounted in ReactJS, but the constructor is not necessary to be present in every component. However, calling super() inside a constructor is necessary for ReactJS.

Syntax:

Constructor(props){  
super(props);  
}  

Example:
App.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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 classname="App">
<h3>Message For You:</h3>
<input type="text" value="{this.state.data}">
<button onclick="{this.handleEvent}">Click Me</button>
</div>
);
}
}
export default App;
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 classname="App"> <h3>Message For You:</h3> <input type="text" value="{this.state.data}"> <button onclick="{this.handleEvent}">Click Me</button> </div> ); } } export default App;
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 (  

Message For You:

); } } export default App;

Main.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<app>, document.getElementById('app'));
</app>
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<app>, document.getElementById('app')); </app>
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
ReactDOM.render(, document.getElementById('app'));  

Output:

Uses of React constructors:

To initialize the local state of the component:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class App extends Component {
constructor(props){
this.state = {
inputTextValue: 'final value',
};
}
}
class App extends Component { constructor(props){ this.state = { inputTextValue: 'final value', }; } }
class App extends Component {  
constructor(props){  
this.state = {  
inputTextValue: 'final value',  
};  
}  
}  

To use ‘this’ inside constructor:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class App extends Component {
constructor(props) {
super();
super(props);
}
}
class App extends Component { constructor(props) { super(); super(props); } }
class App extends Component {  
constructor(props) {  
super();  
super(props);  
}  
}  

To initialize third-party libraries:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class App extends Component {
constructor(props) {
this.myjournal = new MyJournalLibrary();
this.journal = new MyJournalLibrary(props.environment);
}
}
class App extends Component { constructor(props) { this.myjournal = new MyJournalLibrary(); this.journal = new MyJournalLibrary(props.environment); } }
class App extends Component {  
constructor(props) {  
this.myjournal = new MyJournalLibrary();  
this.journal = new MyJournalLibrary(props.environment);  
}  
}  

Binding some context(this) when a class method is needed to be passed in props to children:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class App extends Component {
constructor(props) {
this.handleFunction = this.handleFunction.bind(this);
}
}
class App extends Component { constructor(props) { this.handleFunction = this.handleFunction.bind(this); } }
class App extends Component {  
constructor(props) {  
this.handleFunction = this.handleFunction.bind(this);  
}  
}  

Arrow Functions:
When using the Arrow Function, binding ‘this’ inside the constructor is not required.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
data: 'Hello World'
}
}
handleEvent = () => {
console.log(this.props);
}
render() {
return (
<div classname="App">
<h3>Message For You:</h3>
<input type="text" value="{this.state.data}">
<button onclick="{this.handleEvent}">Click Me</button>
</div>
); } }
export default App;
import React, { Component } from 'react'; class App extends Component { constructor(props){ super(props); this.state = { data: 'Hello World' } } handleEvent = () => { console.log(this.props); } render() { return ( <div classname="App"> <h3>Message For You:</h3> <input type="text" value="{this.state.data}"> <button onclick="{this.handleEvent}">Click Me</button> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends Component {  
constructor(props){  
super(props);  
this.state = {  
data: 'Hello World'  
}  
}  
handleEvent = () => {  
console.log(this.props);  
}  
render() {  
return (  

Message For You:

); } } export default App;