React Base Fiddle (JSX)

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

HTML

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {  
		let checked= this.state.checked;
  	this.setState({checked:!checked})
  }

  render() {
    return (
    <div>
      <Child checked={this.state.checked} givenName={'Ram'} handleChange={this.handleInputChange}/>         
      <Child checked={this.state.checked} givenName={'Sham'} handleChange={this.handleInputChange}/>
    </div>
    );
  }
}

class Child extends React.Component {
	render() {
  return (
  <div>
    <label htmlFor={this.props.givenName}>{this.props.givenName}</label>
  	<input
      name="test"
      id={this.props.givenName}
      type="checkbox"
      defaultValue='checked'
      value={this.props.checked}
      onChange={this.props.handleChange} />
    </div>
  )
 }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);