React.js constructor() Method

A constructor is a method that is called automatically when we created an object from that class. It can manage initial initialization tasks such as defaulting certain object properties or sanity testing the arguments passed in. Simply placed, the constructor is a method that helps in the creation of objects. 

The constructor is no different in React. This can connect event handlers to the component and/or initialize the component’s local state. Before the component is mounted, the constructor() function is shot, and, like most things in React, it has a few rules that you can follow when using them.

• Step 1: Call super(props) before using this.props

  Due to the nature of the constructor, this.props object is not accessible straight out of the gate, which can lead to errors. An error will be thrown by this constructor:

  
  
  

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

  Instead, we transfer the value of a prop to the super() function from the constructor():

  constructor(props) {
   super(props);
   console.log(this.props);
  }

  When you call the super() function, the parent class constructor is called, which is in the case of a React is React.Component. 

• Step 2: Never call setState() inside constructor()

  The constructor of your component is the ideal place to set the component’s initial state. You must set the initial state directly, rather than using setState() as you can in other methods in your class:

  constructor(props) {
   super(props);
  
   this.state = {
     name 'kapil',
     age: 22,
   };
  }

  The only place you can assign the local state directly like that is the constructor. You should depend on setState() somewhere else inside our component instead.

• Step 3: Avoid assigning values from this.props to this.state

  You should try to avoid setting values from the properties when setting the initial component state in the constructor. We can do the following:

  constructor(props) {
   super(props);
  
   this.state = {
     name: props.name,
   };
  }

  You wouldn’t be allowed to use setState() to change the property later. You may easily reference the property directly in your code by naming this.props.name, instead of assigning the property directly to the state.

• Step 4: Bind events all in one place

  We can easily bind your event handlers in the constructor:

  constructor(props) {
   super(props);
  
   this.state = {
     // Sets that initial state
   };
  
   // Our event handlers
   this.onClick = this.onClick.bind(this);
   this.onKeyUp = this.onKeyUp.bind(this);
   // Rest Code
  }

Creating React Application:

• Step 1: Create a React application using the following command.

  npx create-react-app foldername

• Step 2: After creating your project folder i.e. foldername, move to it using the following command.

  cd foldername

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. The following example covers constructor demonstration.

App.js

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {

    // Calling super class constructor
    super(props);

    // Creating state
    this.state = {
      data: 'My name is User'
    }

    // Binding event handler
    this.handleEvent = this.handleEvent.bind(this);
  }

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

  render() {
    return (
      <div >
        <input type="text" value={this.state.data} />
        <br></br> <br></br>
        <button onClick={this.handleEvent}>Please Click</button>
      </div>
    );
  }
}

export default App;

Step to Run Application: Run the application  from the root directory of the project, using the following command

npm start

Output: