React Base Fiddle (JSX)

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

by Muthuraman B

HTML

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

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

React

var Hello = React.createClass({
  getInitialState(){
  	return{
    	data: [{name:'bubbles', value: true}, {name:'gregory', value: false}]
    }
  },
  handleChange(index){
  
  	var data = [...this.state.data];
    data[index].value = !data[index].value;
    this.setState(data);
  },
  
  render: function() {
  
    return  (
    <div>
        <div>hello</div>
    		{	this.state.data.map(function(item, index) {
      return (
        
        <input key={index} type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/>
        
      );
    }.bind(this))
    }
    </div>)
  }
});

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