How to override a parent class method in React?

Question

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.createClass( {

        getName: function() { return "super" },

        render: function() {

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

    class HelloChild extends Hello {
        constructor(props) {
          super(props);

          console.log( this.getName());
        }
        getName()
        {
          return "Child";
        }
    };

I want it to print "This is: Child" but it prints "This is: super"

jsbin.com/qizihe/edit?html,js,output

caub
– caub

2016-08-04 11:30:58 +00:00
Commented Aug 4, 2016 at 11:30 — caub
– caub, Commented Aug 4, 2016 at 11:30

Ryan Shillington · Accepted Answer · 2017-08-02 01:42:10Z

5

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.

class HelloChild extends Hello {
    constructor(props) {
      super(props);

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

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

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

Then it'll work.

answered Aug 2, 2017 at 1:42

Ryan Shillington

25.5k17 gold badges103 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Don Rhummy · Accepted Answer · 2016-08-04 04:39:37Z

3

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:

class Hello extends React.Component {

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

        render() {

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

answered Aug 4, 2016 at 4:39

Don Rhummy

26.1k53 gold badges197 silver badges364 bronze badges

2 Comments

Andrew Li Over a year ago

The OP wants to know how to access subclass from superclass (which is impossible AFAIK), not how to make an abstract method-the super and subclass methods have different implementations

Saad Over a year ago

That is the OP ^

Igor · Accepted Answer · 2017-11-27 10:59:15Z

3

Actually you can override method to execute code from your subclass

class Hello extends React.Component {
getName() {
 super.getName();
 }
}


class HelloChild extends Hello {
getName()
    {
      return "Child";
    }
}

answered Nov 27, 2017 at 10:59

Igor

865 bronze badges

Comments

Shota · Accepted Answer · 2016-08-04 07:23:52Z

0

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.

answered Aug 4, 2016 at 7:23

Shota

7,3989 gold badges40 silver badges74 bronze badges

Comments

Dev Null · Accepted Answer · 2025-02-04 03:34:52Z

If you're reading this far, you've likely found that this still doesn't work correctly:

class Hello extends React.Component {
  getName() {
    if (new.target === Hello) {
      throw new TypeError("method not implemented");
    }
  };

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

class HelloChild extends Hello {
  getName() {
    return "Child";
  };
}

I used to not think arrow functions on classes were important - it looked like old school javascript, but it's exactly what's needed.

Arrow functions correctly preserve this context, this is the correct way to do it:

class Hello extends React.Component {
  getName = () => {
    if (new.target === Hello) {
      throw new TypeError("method not implemented");
    }
  };

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

class HelloChild extends Hello {
  getName = () => {
    return "Child";
  };
}

Collectives™ on Stack Overflow

How to override a parent class method in React?

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related