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

Question

Accepted Answer

A child class constructor cannot make use of “this” reference until super() method has been called. The main reason for passing the props parameter to super() call is to access this.props in your child constructors. The same applies to ES6 sub-classes as well. Access to this: In JavaScript, a child class constructor cannot make use of this until super() has been called. The same applies to React class components12. If you try to use this before super(), JavaScript will throw an error. Inherit Parent Class Properties: The super() call is responsible for invoking the constructor of the parent class (in this case, React.Component). This allows your component to inherit methods from the parent class. class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props); // Prints { name:'sudheer',age:30 }
    }
}
 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: 'sudheer',age: 30 }
    }

render() {
        // No difference outside constructor
        console.log(this.props) // Prints { name: 'sudheer',age: 30 }
    }
}

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

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

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

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

Scenario Questions

Follow-up Questions