What is the purpose of using super constructor with props argument in React?
Tags: beginners, react, programming, webdev
Published: 2023-02-14 02:44:48

## **👷‍♂️ super constructor**

A super constructor is a special constructor in the class hierarchy of object-oriented programming languages. It refers to the constructor of the parent class that is being extended in the current class. The purpose of using the super constructor with a props argument is to inherit the properties of the parent class and also pass in additional properties as arguments to the child class.

---

## **🍃 props**

In React, props are the properties that are passed to a component from its parent component. They can be used to pass values and functions to the component, which can then be used to render the component. When creating a component in React, it is common to extend an existing component and pass in some additional props to that component. This is where the super constructor with a props argument comes into play.

---

## **🦾Let's understand the Functionality of Super Constructor with Props Argument in React**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nul74eauqkwukl4rm5m.png)

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

🙉 **Passing props:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abno3bzmv1vbujcw2w8m.png)

🙈 **Not passing props:**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug4m6bkxxj5ee28ab3iw.png)

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

---

By using the super constructor with a props argument, the component is able to inherit the properties of the parent component and also access the new props that have been passed in. This allows the component to make use of the properties of both the parent component and the new props in its render method. This is particularly useful in situations where the component needs to access values or functions from its parent component in order to render its contents.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mc7aac30advcb4faiuuq.png)


The purpose of using the super constructor with a props argument is to allow a component to inherit the properties of its parent component and also pass in additional properties as arguments to the component. This is particularly useful in React when creating a component that needs to access values or functions from its parent component in order to render its contents. By using the super constructor with a props argument, the component can access both the properties of the parent component and the new props, allowing for a more flexible and dynamic component.

---

## **🧱 Syntax**

There's nothing complex in using `super(props)`, we just have to call `super(props)` in the constructor method of our child class component.

---

## **🧵Conclusion**

React is a free and open-source JavaScript library for UI design. It renders the components written in JSX. It introduces the concept of props. Props are used to pass data from parent components to child components. These props can be updated only by the parent component. It is read-only for child components. We might require props inside the child component constructor with this keyword. `super()` function calls the constructor of the parent class. Using super constructor with props arguments basically allows accessing `this.props` in a Constructor function.

---

## **🍀Support**

Please consider following and supporting us by subscribing to our channel. Your support is greatly appreciated and will help us continue creating content for you to enjoy. Thank you in advance for your support!

[YouTube](https://youtube.com/@codeofrelevancy)
[Discord](https://discord.com/invite/f8jwnzcRz2)
[GitHub](https://github.com/codeofrelevancy)