JSFiddle - React, Tailwind, and code Playground

by JScrambler

HTML

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript

var ItemToggle = React.createClass({
  onClick: function (type) {
    var ItemClass;

    switch (type) {
      case 'A':
        ItemClass = "foo";
        break;
      case 'B':
        ItemClass = "bar";
        break;
      default:
        throw new Error('Unimplemented type');
    }

    this.props.setActiveItem(ItemClass);
  },
  render: function () {
    return (
      <ul>
        <li onClick={this.onClick.bind(this, 'A')}>Item A</li>
        <li onClick={this.onClick.bind(this, 'B')}>Item B</li>
      </ul>
    );
  }
});

var ActiveItemPanel = React.createClass({
    contextTypes: {
      activeItem: React.PropTypes.any
    },
    render: function () {
      return (
        <div>
          {this.context.activeItem}
        </div>
      );
    }
});

var DummyWrapper = React.createClass({
  render: function () {
    return <ActiveItemPanel />;
  }
});

var Parent = React.createClass({
  childContextTypes: {
    activeItem: React.PropTypes.any
  },
  getChildContext: function () {
    return {
      activeItem: this.state.activeItem
    };
  },
  setActiveItem: function (ItemClass) {
    this.setState({activeItem: <ItemClass />});
  },
  render: function () {
    return (
      <div>
        <ItemToggle setActiveItem={this.setActiveItem} />
        <DummyWrapper />
      </div>
    );
  }
});
    
React.render(<Parent/>, document.getElementById('container'));