ReactJS Tutorial Part #6 ~ Using Constructors

Hello, how are you all friends, back again with Teman Ngoding. Previously we discussed State and Props in ReactJS, this time we will discuss Constructors in ReactJS.

A constructor is a special function or method in a class that will be executed when an object is created or a component is used.

Constructors are usually used to initialize components. Constructors exist only on components created with classes.

The constructor concept is the same in React. The constructor in a React component is called before the component is mounted. When you implement constructors for React components, you need to call the super(props) method before any other statements. If you don’t call the super(props) method, this.props will be undefined in the constructor and may cause bugs.

I will give an example:

App.js

Main.js

Output

The most common questions related to constructors are

1. Is it necessary to have a constructor in each component?

Get Mantan Programmer’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

No, it’s not necessary to have a constructor in each component. If the component is not complex, it just returns a node.

class App extends Component {  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}

Is it necessary to call super() inside the constructor?
Yes, need to call super() inside constructor. If you need to set properties or access ‘this’ inside the constructor in your component, you need to call super().

class App extends Component {  
    constructor(props){  
        this.fName = "Jhon"; // 'this' is not allowed before super()  
    }  
    render () {  
        return (  
            <p> Name: { this.props.name }</p>  
        );  
    }  
}

When you run the above code, you get an error message saying ‘this’ is not allowed before super(). So if you need to access the props inside the constructor, you need to call super(props).

Arrow Functions

The Arrow function is a new feature of the ES6 standard. If you need to use arrow functions, there is no need to bind any events to ‘this.’ Here, the scope of ‘this’ is global and not limited to any function calls. So If you are using Arrow Function, there is no need to bind ‘this’ inside constructor.

import React, { Component } from 'react';  
  
class App extends Component {  
  constructor(props){  
    super(props);  
    this.state = {  
         data: 'www.temanngoding.com'  
      }  
  }  
  handleEvent = () => {  
    console.log(this.props);  
  }  
  render() {  
    return (  
      <div className="App">  
    <h2>React Constructor Example</h2>  
    <input type ="text" value={this.state.data} />  
        <button onClick={this.handleEvent}>Please Click</button>  
      </div>  
    );  
  }  
}  
export default App;

We can use the constructor in the following way:

1. 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',  
        };  
  }  
}

2) Using ‘this’ inside the constructor

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

4) Bind some context (this) when you need class methods 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);  
    }  
}

That’s the tutorial this time that I can convey, hopefully it will be useful for all of my friends. Don’t forget to also read the previous tutorial.

ReactJS Tutorial Part #5 ~ Understanding State and Props

ReactJS Tutorial Part #4 ~ ReactJS Components

ReactJS Tutorial Part #3: ReactJSX Functions

Thank you….