title: Extend 'Component'; Uncaught TypeError: Super expression must either be null or a function, not object
body: <p>I am trying to extend React Component for that thing I dislike doing over and over again, the <code>this.onInputChange = this.onInputChange.bind(this);</code> requirement. So far I have tried:</p>
  
  <p>MyComponent.js-</p>
  
  <pre><code>import React, { Component } from 'react';
  
  
  // function bindReactMethod(this_value, method_name) {
  //     // Bind all of your custom methods, like:
  //     //   this.onInputChange = this.onInputChange.bind(this);
  //     this_value[method_name] = this_value[method_name].bind(this_value)
  // }
  
  
  // https://stackoverflow.com/questions/15192722/javascript-extending-class
  class MyComponent extends Component {
  
      constructor(props) {
          super(props);
          this.bindReactMethods = this.bindReactMethods.bind(this)
      }
  
      bindReactMethods(this_value, method_name) {
          // Bind all of your custom methods, like:
          //   this.onInputChange = this.onInputChange.bind(this);
          this_value[method_name] = this_value[method_name].bind(this_value)
      }
  }
  </code></pre>
  
  <p>SearchBar.js-</p>
  
  <pre><code>import React from 'react';
  import MyComponent from '../utils/MyComponent';
  
  
  export default class SearchBar extends MyComponent {
  
      constructor(props) {
          super(props);
          this.state = {term: ''};
          this.bindReactMethods(['onInputChange'])
      }
  
      onInputChange(event) {
          console.log(event.target.value);
          this.setState({term: event.target.value})
      }
  </code></pre>
  
  <p>fails with </p>
  
  <pre><code>Uncaught TypeError: Super expression must either be null or a function, not object
  </code></pre>
  
  <p>and</p>
  
  <p>MyComponent.js- </p>
  
  <pre><code>import React, { Component } from 'react';
  
  
  function bindReactMethod(this_value, method_name) {
      // Bind all of your custom methods, like:
      //   this.onInputChange = this.onInputChange.bind(this);
      this_value[method_name] = this_value[method_name].bind(this_value)
  }
  
  
  // https://stackoverflow.com/questions/15192722/javascript-extending-class
  class MyComponent extends Component {
  
      constructor(props, custom_methods=[]) {
          super(props);
          try {
              custom_methods.map((method_name) =&gt; {
                  bindReactMethod(this, method_name)
              });
          }
          catch (error) { } // ignore error because that means the user didnt have custom methods to bind
      }
  }
  </code></pre>
  
  <p>SearchBar.js-</p>
  
  <pre><code>import React from 'react';
  import MyComponent from '../utils/MyComponent';
  
  
  export default class SearchBar extends MyComponent {
  
      constructor(props) {
          super(props, ['onInputChange']);
          this.state = {term: ''};
      }
  
      onInputChange(event) {
          console.log(event.target.value);
          this.setState({term: event.target.value})
      }
  </code></pre>
  
  <p>also fails on </p>
  
  <pre><code>Uncaught TypeError: Super expression must either be null or a function, not object
  </code></pre>
  
  <p>I would like to extend <code>Component</code> and always use my component, with this <code>bindReactMethods</code> callback being optional.</p>