How To Override A Parent Class Method In React?

I'm extending a base class and overriding a method in the base class. But when I call it, it calls the super class version. How do I override the method? var Hello = React.crea

Solution 1:

The problem is that you're mixing ES6 type class declaration (ex. Hello) with old school Javascript declaration (ex. HelloChild). To fix HelloChild, bind the method to the class.

classHelloChildextendsHello{
    constructor(props) {
      super(props);

      this.getName = this.getName.bind(this); // This is important

      console.log( this.getName());
    }

    getName()
    {
      return"Child";
    }
};

Then it'll work.

Solution 2:

I found the answer (adapted from here: https://gist.github.com/Zodiase/af44115098b20d69c531 ) - the base class needs to also be defined in an ES6 manner:

classHelloextendsReact.Component {

        //abstract getName()getName()
        {
            if (new.target === Hello) {
                thrownewTypeError("method not implemented");
            }
        }

        render() {

            return<div>This is: {this.getName()}</div>;
        }
    };

Solution 3:

Actually you can override method to execute code from your subclass

classHelloextendsReact.Component {
getName() {
 super.getName();
 }
}


classHelloChildextendsHello {
getName()
    {
      return"Child";
    }
}

Solution 4:

Please note that this answer proposes different approach:

I wonder why you should do this in the first place, my point is that directly coupling two react components is not a right way to implement re-usability in React.

If you are trying to have multiple child components which extends one parent, What I would do is, to have child components and a higher-order component and then implement common functionality with Composition. This way you can skip those methods, which you were trying to override and so everything would stay clear.