React Constructor and Super Keyword

Last Updated : 01 Dec, 2023

In this article, we will learn about the React Constructor and Super keyword. In React JS constructor is used for class components not for the functional component. In React JS super call other constructor methods that is instantiated.

Table of Content

Constructor
Super

Constructor:

In React JS constructor is used for class components not for the functional component.
It is used to initialize objects i.e, State in React JS.
It is used to bind methods in React JS.
It is used to read or access a parent’s property from a child’s component in React JS.
There is no need for class until state variables are initialized based upon props.
Constructor is essential whenever the need to access or generate local state.
Constructor is used for binding event handlers that occur in components.

Note: Constructor runs before anything else in the class-based code in react.js to the life-cycle of the component.

Super:

In ReactJS super call other constructor methods that is instantiated.
In ReactJS, it is used to access parent properties and methods from the child components.
It is used in an overridden method in react.js
Super is reside always inside the constructor.
Super is essential whenever the constructor is there in ReactJ S.
It is important to call super before the object initializes i.e, before using this.state in the constructor if it’s not there then the code gives a bug.

Steps to Create the React Application And Installing Module:

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

Project structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This file will run in the project structure of the file name App.js. The example describes how constructor is a method call and instantiates the object and the super is useful for this.state

Javascript

import logo from './logo.svg';
import './App.css';
import { Component } from 'react'
class App extends Component {
    constructor() {
        super();
        this.state = {
            name: { 
                firstname: "organisation", 
                lastname: "Article" },
            company: "ztm"
        };
    }
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo"
                        alt="logo" />
                    <p>
                        Hello {this.state.name.firstname} 
                        {this.state.name.lastname},
                        I work at {this.state.company}
                    </p>
                    <button onClick={() => {
                        this.setState(() => {
                            return {
                                name: { 
                                    firstname: 'Gfg', 
                                    lastname: 'React Article'
                                }
                            }
                        }, () => {
                            console.log(this.state);
                        });
                        //
                    }}>change name</button>
                    <a
                        className="App-link"
                        href="https://reactjs.org"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        Learn React
                    </a>
                </header>
            </div>
        );
    }
}
 
export default App;