title: React class methods overriding
body: <p>I am trying to create some kind of class composition in react:</p>
  
  <pre><code>class Entity {
    constructor(props) {
      super(props);
    }
    renderPartial() {
      return (&lt;div&gt;Entity&lt;/div&gt;)
    }
    render() {
      return (&lt;div&gt;header {this.renderPartial()}&lt;/div&gt;);
    }
  }
  
  class Person extends Entity{
    constructor(props) {
      super(props);
    }
    renderPartial() {
      return (&lt;div&gt;Person&lt;/div&gt;)
    }
  }
  
  class Manager extends Person {
    constructor(props) {
      super(props);
    }
  
    renderPartial() {
      return (&lt;div&gt;Manager&lt;/div&gt;)
    }
  }
  </code></pre>
  
  <p>In the following example <code>Person</code> extends from <code>Entity</code> class. And the goal here is to render partial content inside of the extended class. So for the simplicity sake I just render class name. This way everything works fine with Person class and it renders its text. But when I extend Manager from Person it writes <code>&lt;div&gt;Person&lt;/div&gt;</code> and I can't understand why. Is there any way to override <code>renderPartial</code> inside of the <code>Manager</code> class?</p>