JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<body>
  <h1>React Re-Render Warning Example</h1>
  <div id="container">
    Loading...
  </div>
  <script type="text/babel">
    var InnerApp = React.createClass({ getInitialState: function() { return { type: '', val: '' } }, componentWillMount: function() { this.setState({ type: this.props.type, val: this.props.val }); }, componentWillReceiveProps: function(nextProps) { this.setState({
    type: nextProps.type, val: nextProps.val }); }, onChange: function(event) { this.setState({ val: event.target.value }) }, render: function() { var renderInput; if (this.state.type === 'text') { renderInput = (
    <input type='text' value={this.state.val} onChange={this.onChange} />); } else { renderInput = (
    <input type='number' value={this.state.val} onChange={this.onChange} />); } return (
    <div>
      {renderInput}
    </div>
    ); } }); var App = React.createClass({ getInitialState: function() { return { type: 'text', val: '' } }, changeType: function(itype) { this.setState({ type: itype, val: itype === 'text' ? 'randomstring' : 32 }); }, render: function() { return (
    <div>
      <button onClick={this.changeType.bind(null, 'text')}>Text</button>
      <button onClick={this.changeType.bind(null, 'number')}>Number</button>
      <InnerApp val={this.state.val} type={this.state.type} />
    </div>
    ); } }); ReactDOM.render(

    <App />, document.getElementById('container'));
  </script>
</body>