The super() is used inside the constructor for the purpose to get access to this keyword inside our constructor. With this let’s try to understand super() first.
Super is a keyword in JavaScript and is used to call super or parent class in the hierarchy. React class extends React Component with ES6 syntax. If we would like to set a property or access this inside the constructor we need to call super() method.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app filename
Step 2: After creating your project folder i.e. example, move to it using the following command:
cd filename
Project structure: It will look like this:
folder structure
Example 1: This example will illustrate the use of super() inside the constructor of the component:
Index.js
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in // your app, pass a function // To log results // (for example: reportWebVitals(console.log)) |
App.js
import React from 'react' class MyComponent extends React.Component { constructor() { // Undefined console.log(this) } render() { // Defined return <div>Super Concept</div>; } } export default MyComponent; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
When running the above code then we get an error that this is not allowed before super(). Now open your browser and go to http://localhost:3000/, you will see the following output:
To solve that error, we use super() in the constructor. Therefore, whenever we want to access this inside the constructor then we need to super() inside the constructor.
Keyword ‘this’: The JavaScript this keyword refers to the object it belongs to.
Example 2: This example illustrates the code by solving that error we use super() in the constructor.
App.js
import React from 'react' class MyComponent extends React.Component { constructor() { super() console.log(this) } render() { return <div>Super Concept</div>; // Defined } } export default MyComponent; |
Output:
Now, we can have access to this in our constructor and use it to have access to the props if that has been passed to the component.
