title: Can you add an external function as a method in a React component class?
body: <p>Given the following React component:</p>
  
  <pre><code>class MyComponent extends Component {
    sayGreeting = () =&gt; {
      return this.props.greeting;
    }
  
    render() {
      return (
        &lt;div&gt;{this.sayGreeting()}&lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><code>greeting</code> is passed via props and is just a string message. Given sayGreeting() might be used in multiple components, with the exact same definition, would it be possible to extract it into a file (see the following code) and then somehow include it in each component as needed. This is like the include module (or mixin?) pattern in programming languages like Ruby.</p>
  
  <pre><code>export const sayGreeting = () =&gt; {
    return this.props.greeting;
  };
  </code></pre>
  
  <p>I was able to do it by importing sayGreeting from that file and setting the prototype of MyComponent as such:</p>
  
  <pre><code>import { sayGreeting } from './someFile';
  // ...
  MyComponent.prototype.sayGreeting = sayGreeting; 
  </code></pre>
  
  <p>But the issue is the "this" keyword, so props will not be defined. I tried binding in the constructor using <code>this.sayGreeting = this.sayGreeting.bind(this)</code>, but it didn't work.</p>