title: ReactJs - Using Mixins with ES6
body: <p><strong>Following up on Egghead.io's video - 'React Components in ES 6 classes', the below works:</strong></p>
  
  <pre><code> 'use strict';
   import React from 'react';
   import Button from './components/form/button';
   import Label from './components/form/label';
  </code></pre>
  
  <hr>
  
  <pre><code> // after refactoring
   //import ReactMixin from './super-classes/react-mixin';
  </code></pre>
  
  <p><strong>//ToDo: Reactor below</strong></p>
  
  <pre><code> let reactMixin =  InnerComponent =&gt; class extends React.Component {
       constructor() {
           super()
           this.state = {count: 0}
  
      //binding custom methods
      this.increment = this.increment.bind(this);
  }
  
  
  increment() {
      this.setState({count: this.state.count + 1});
  }
  
  render() {
      return (
          &lt;InnerComponent update={this.increment} {...this.state} {...this.props} /&gt;
      )
     }
   }
  </code></pre>
  
  <hr>
  
  <pre><code> let ButtonMixed = reactMixin(Button); // using local variable
   let LabelMixed = reactMixin(Label); // using local variable
  
     class App extends React.Component {
        render(){
       return(&lt;section&gt;
           // WOULD LIKE TO DO
           // &lt;ReactMixin component={?Button?} /&gt;
           // &lt;ReactMixin component={?Label?} /&gt;
  
           &lt;LabelMixed txt="I am a mixed label calling a form component" /&gt;
             &lt;ButtonMixed txt="I am a mixed button, me too! " /&gt;
         &lt;/section&gt;);
        }
      }
  
  
    App.propTypes = {txt: React.PropTypes.any};
    module.exports = App;
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>I am trying to refactor out ReactMixins to a seperate component, import it in,
  and then just use it in my render, like this:</p>
  
  <pre><code>          &lt;ReactMixins component={?} /&gt;
  </code></pre>
  
  <p>Any ideas on how best to refactor this for multiple usage?</p>
  
  <p>Thanks ...</p>