From your example, super(props) would call the React.Component constructor passing in props as the argument. So to ensure that the React.Component’s constructor() function gets called, we call super(props). super(props) is a reference to the parents constructor() function, that’s all it is. super(props) would pass props to the parent constructor. In this example, you are extending the React.Component class, and per the ES2015 spec, a child class constructor cannot make use of this until super() has been called; also, ES2015 class constructors have to call super() if they are subclasses.
class Animal {
void eat() {
System.out.println("animal : eat");
}
}
class Dog extends Animal {
void eat() {
System.out.println("dog : eat");
}
void anotherEat() {
super.eat();
}
}
public class Test {
public static void main(String[] args) {
Animal a = new Animal();
a.eat();
Dog d = new Dog();
d.eat();
d.anotherEat();
}
}When you want to access this.props in constructor.
Passing:
class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home', … }
}
}Not passing:
class MyComponent extends React.Component {
constructor(props) {
super()
console.log(this.props)
// -> undefined
// Props parameter is still available
console.log(props)
// -> { icon: 'home', … }
}
render() {
// No difference outside constructor
console.log(this.props)
// -> { icon: 'home', … }
}
}By contrast:
class MyComponent extends React.Component {
constructor() {
super();
console.log(this); // this logged to console
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
More detail as per this excellent stack overflow answer
You may see examples of components created by extending the React.Component class that do not call super() but you'll notice these don't have a constructor, hence why it is not necessary.
class MyOtherComponent extends React.Component {
render() {
return <div>Hi {this.props.name}</div>;
}
}
Super(): It is used to call the constructor of its parent class. This is required when we need to access some variables of its parent class. Explanation: If we want to use this in the constructor, we need to pass it to super. If we want to use this.props inside the constructor we need to pass it with the super() function. Otherwise, we don’t want to pass props to super() because we see this.Props are available inside the render function. Before going deep into the main difference, let us understand what is Super() and Props as shown below:
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
Example of Super(): Simple component demonstrating the use of Super() function.
Filename-App.js:
import React from 'react'
class MyComponent extends React.Component {
constructor(props) {
super()
console.log(this.props) // Undefined
console.log(props) // Defined Props Will Be Logged
}
render() {
return <div>Hello {this.props.message}</div>; // Defined
}
}
export default MyComponent;
Example of Super(props): Simple component demonstrating the use of Super(props) function.
Filename-App.js:
import React from 'react'
class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props) // {name:'Bob' , .....} Props Will Be Logged
}
render() {
return <div>Hello {this.props.message}</div>; // defined
}
}
export default MyComponent;
Note: Outside Constructor() Both will display same value
for 'this.props'When you want to access this.props in constructor() then you should pass props to super() method. Outside constructor() both will display same value for this.props. Made by Michael Sakhniuk
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: 'John', ... } }}class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined }}super is the first statement in the constructor before accessing any method or data in the child or derived component, this.props returns undefined if you don’t call the super(prop) constructor, Super is a keyword in javascript and is used to call super or parent class in the inheritance hierarchy. React class extends React.Component with ES6 syntax To make it this.props available, You have to call super(props) as a first line in the child class constructor. This tutorial covers the difference between super and super with props parameter in React class constructor.
class PropsExampleComponent extends React.Component {
constructor(props) {
super(props);
}
}class ExampleComponent extends React.Component {
constructor(props) {
super();
}
}class Animal {
constructor(type) {
this.type = type;
}
}
class Lion extends Animal {
constructor(type) {
super(type);
}
eat() {
console.log('Lion eat' + this.type);
}
}class ExampleComponent extends React.Component {
constructor(props) {
super();
console.log(this); // ExampleComponent{props: undefined, context: undefined, refs: {…}, updater: {…}}
}
}class ExampleComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
}
}I wrote super(props) more times in my life than I’d like to know: Why do we call super? Can we not call it? If we have to call it, what happens if we don’t pass props? Are there any other arguments? Let’s find out. Imagine using this before super call was allowed. A month later, we might change greetColleagues to include the person’s name in the message: It can be even more challenging to debug if this happens in some method that’s called from the constructor. And that’s why I recommend always passing down super(props), even though it isn’t strictly necessary:
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
isOn: true
};
}
// ...
}class Checkbox extends React.Component {
state = {
isOn: true
};
// ...
}class Checkbox extends React.Component {
constructor(props) {
// 🔴 Can’t use `this` yet
super(props);
// ✅ Now it’s okay though
this.state = {
isOn: true
};
}
// ...
} greetColleagues() {
alert('Good morning folks!');
alert('My name is ' + this.name + ', nice to meet you!');
} constructor(props) {
super(props);
// ✅ Okay to use `this` now
this.state = {
isOn: true
};
}Difference between super() and super props Reactjs. When creating Class Components in React, we often call super in the constructor of the Component and also pass in props to it. But do we really need to do this? I mean pass props to super. Please check the below video where I have explained the difference between super() and super(props). please like share and comment and do subscribe to my channel But why pass props to super? It’s because if we want to use this in the constructor, we need to pass it to super. Class components should always call the base constructor with props.
and ES6 Classes have to call super if they are subclasses.
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
console.log(props); // defined
}
render() {
return <div>Hello {this.props.message}</div>; // defined
}
}However, if we use super(props)
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // props will get logged.
}
render() {
return <div>Hello {this.props.message}</div>; // defined
}
}