{

Reactjs Fix Must call a super constructor in derived class before accessing this


This tutorials explains an error Must call a super constructor in derived class before accessing this in react

First, Lets create a react component

import React from "react";

class CssStyles extends React.Component {
    constructor() {
    }
    render() {
        return <div>
            <button value="submit"></button>
        </div>

    }
}
export default CssStyles;

And called the above class in another react component

import React from 'react';
import CssStyles from './css-styles';
function App() {
  return (
    <div className="App">

      <CssStyles></CssStyles>

    </div>
  );
}

export default App;

It throws an error for react component as Uncaught ReferenceError: Must call a super constructor in derived class before accessing ‘this’ or returning from derived constructor

Fix for call a super constructor in derived class before accessing ‘this’ or returning from derived constructor

We created a class with ES6 syntax.

React create an instance of this react class

Solution and Fix for this

  • React component extends React. Component, React. the component is a base class the derived class is an extended class. In Derived class,- If it has a constructor, The first line in the constructor is to call super() before calling this keyword in the component.

If no constructor is defined in a constructor, This error will not come, It calls the default constructor of a superclass.

For example, Let’s try to understand how Inherited classes work in ES6.

Define base class Animal with the type attribute.

class Animal{
   constructor(){
      this.type = 'animal';   
   }
}

Define Child or derived class Lion by inherit(Extend) Animal class In Constructor,

  • You called this.type before super(). Which is not correct and invalid Valid is, Child constructor this keyword not used and called before declaring super(), means super() must be first line in ES derived class constructor if you have constructor defined.
  • this call works after super() statement as given below
class Lion extends Animal{
   constructor(){
      console.log(this.type); // gives an error ReferenceError
      super();
      console.log(this.type);// This works and print Animal
   }
}

Created One more class by extending Lion class No constructor is defined, No error and valid.

class MasaiLion extends Lion{}  
var lion = new Lion; // Animal
var masaiLion = new MasaiLion; // Animal

Hope you understand the ES6 classes inheritance and this, super statement usage.

The same way we have to implement in React class components as these are following ES2015 standards.

Conclusion

As a summary, ES6 class components must follow the below guidelines for creating a react component.

  • Derived class constructor, calling this gives a ReferenceError before the call to super()
  • Derived class constructor must contain the first line to call superclass constructor which initializes the data inside superclass
  • If there is no constructor, These rules do not apply and works as expected
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

How to fix Import In the body of module; reorder to top import/first? in React and javascript