title: FP alternative to polymorphism in JavaScript/ReactJS
body: <p>I'm currently working on a ReactJS project where I need to create "re-usable" components in which some of the methods would need to be "overridden". In OOP I would use polymorphism. I've done some reading and it seems the consensus is to use HoC/composition but I can't quite figure out how to achieve this. I figure if I could just get a ES6 sample using composition it would maybe be easier to adapt the idea to ReactJS afterwards.</p>
  
  <p>Below is a ES6 OOP example (ignore the event handling it's just for testing) of pretty much what I would like to achieve in ReactJS. Does anyone have some guidance on how to break up a ReactJS component into a HoC or even just demonstrate how I would go about using composition in ES6 based on the example?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class TransferComponent {
      constructor(){
          let timeout = null;
  
          this.render();
          this.events();
      }
  
      events(){
          let scope = this;
  
          document.getElementById('button').addEventListener('click', function(){
              scope.validate.apply(scope);
          });
      }
  
      validate(){
          if(this.isValid()){
              this.ajax();
          }
      }
  
      isValid(){
          if(document.getElementById('username').value !== ''){
              return true;
          }
  
          return false;
      }
  
      ajax(){
          clearTimeout(this.timeout);
  
          document.getElementById('message').textContent = 'Loading...';
  
          this.timeout = setTimeout(function(){
              document.getElementById('message').textContent = 'Success';
          }, 500);
      }
  
      render(){
          document.getElementById('content').innerHTML = '&lt;input type="text" id="username" value="username"/&gt;\n\
              &lt;button id="button" type="button"&gt;Validate&lt;/button&gt;';
      }
  }
  
  
  class OverrideTransferComponent extends TransferComponent{
      isValid(){
          if(document.getElementById('username').value !== '' &amp;&amp; document.getElementById('password').value !== ''){
              return true;
          }
  
          return false;
      }
  
      render(){
          document.getElementById('content').innerHTML = '&lt;input type="text" id="username" value="username"/&gt;\n\
              &lt;input type="text" id="password" value="password"/&gt;\n\
              &lt;button id="button" type="button"&gt;Validate&lt;/button&gt;';
      }
  }
  
  
  const overrideTransferComponent = new OverrideTransferComponent();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="message"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong>
  Even though my original question was around FP I think render props is a really good solution to my issue and avoids the HoC issues.</p>