What is the purpose of using super constructor with props argument?

A child class constructor cannot make use of this reference until super() method has been called. The same applies for ES6 sub-classes as well. The main reason of passing props parameter to super() call is to access this.props in your child constructors.

Passing props:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

Not passing props:

class MyComponent extends React.Component {
  constructor(props) {
    super();

    console.log(this.props); // prints undefined

    // but props parameter is still available
    console.log(props); // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

The above code snippets reveals that this.props is different only within the constructor. It would be the same outside the constructor.

February 25, 2022

953

What is React?

November 06, 2022

ReactJS

How to programmatically trigger click event in React?

November 06, 2022

ReactJS

Understanding the Differences Between Props and State in React

November 03, 2022

ReactJS