react-mixins-with-es6-components

<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="lib/script.js"></script>
</body>
</html>

/* Add your styles here */

let ReactMixin = InnerComponent => class extends React.Component{
  constructor(){
    super()
    this.state = {count: 0}
    this.increment = this.increment.bind(this);
  }
  increment(){
    this.setState({count: this.state.count+1})
  }
  componentWillMount(){
    console.log('will mount')
  }
  render(){
    return <InnerComponent update={this.increment} {...this.state} {...this.props} />
  }
  componentDidMount(){
    console.log('mounted')
  }
}

class Button extends React.Component {
  render(){
    return <button onClick={this.props.update}>{this.props.txt} - {this.props.count}</button>
  }
}

class Label extends React.Component {
  render(){
    return <label onClick={this.props.update}>{this.props.txt} - {this.props.count}</label>
  }
}


let ButtonMixed = ReactMixin(Button);
let LabelMixed = ReactMixin(Label);

class App extends React.Component {
  render(){
    return (<div>
      <ButtonMixed txt="I am a mixed button" />
      <LabelMixed txt="I am a mixed label" />
      </div>
      )
  }
}


ReactDOM.render(<App />, document.getElementById('app'));