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

  • This method has been known as, a child class constructor cannot create use of this reference until super() .
  • 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.
  • The super() is a requirement, while implementing the constructor() function inside a React component.
  • For example, super(props) would call the React.
  • Component constructor passing in props as the argument.

For example in Passing props

[pastacode lang=”markup” manual=”class%20MyComponent%20extends%20React.Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%0A%0A%20%20%20%20console.log(this.props)%20%2F%2F%20prints%20%7B%20name%3A%20’bharath’%2C%20age%3A%2023%7D%0A%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

 

For example in Not passing props

[pastacode lang=”markup” manual=”class%20MyComponent%20extends%20React.Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super()%0A%0A%20%20%20%20console.log(this.props)%20%2F%2F%20prints%20undefined%0A%0A%20%20%20%20%2F%2F%20but%20props%20parameter%20is%20still%20available%0A%20%20%20%20console.log(props)%20%2F%2F%20prints%20%7B%20name%3A%20’%20bharath%20’%2C%20age%3A%2023%20%7D%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20%2F%2F%20no%20difference%20outside%20constructor%0A%20%20%20%20console.log(this.props)%20%2F%2F%20prints%20%7B%20name%3A%20’%20bharath%20’%2C%20age%3A%2023%20%7D%0A%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]
  • In The above code snippets shows that this.props is different only within the constructor.
  • It would be the same outside the constructor.
Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

What is Prop Drilling ?

We pass a prop with another component with the help of all the components that come between, this method is known as prop drilling. Prop drilling is basically a situation…
View Answer

What is React DOM ?

It is an object which exposes a number of top level APIs to interact with the browser DOM. It provides DOM-specific methods that can be used at the top level…
View Answer

What is Flux ?

It is an application architecture that Facebook makes use of internally for constructing the client-side web application with React . It is a programming concept, where the data is a…
View Answer