React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Hemanth HM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

var Hello = React.createClass({
  getInitialState: function() {
    return {
      msgs: {}
    };
  },
  limitSelection: function(e) {
    var id = ~~e.target.id;
    debugger;
    if (Object.keys(this.state.msgs).filter(function(k){ return this.state.msgs[k] },this).length === 0) {
      console.log("first");
      this.state.msgs[id] = "Primary";
      this.setState({
        msgs: this.state.msgs
      })
    } else {
      if(!this.state.msgs[id]){
           this.state.msgs[id] = "Make Primary"
           this.setState({
             msgs: this.state.msgs
           });
      } else {
          this.state.msgs[id] = null;
          this.setState({
             msgs: this.state.msgs
           });
      }
    }
  },
  render: function() {
    return <div onClick = {this.limitSelection}>
      <input type = "checkbox" name = "foo" value = "bar" id = "0" / >
      < label for = "foo_bar"> Bar {this.state.msgs[0]} < /label>

      < input type = "checkbox" name = "foo" value = "baz" id = "1" / >
      < label for = "foo_baz" > Baz {this.state.msgs[1]} < /label> 
    < /div>
  }
});

ReactDOM.render( < Hello name = "World" / > ,
  document.getElementById('container')
);