React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by sabbin

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Checkbox extends React.Component {

  constructor(props){
  	super(props);
    this.onItemClick = this.onItemClick.bind(this);
  }
  
  onItemClick = (e) => {
    const {id} = e.target;    
    this.props.handleCheckboxClick(id);
  }
  
  render() {
    
    const {id, selected} = this.props;
    console.log(selected);
    return (
      <div>
        <input 
        type="checkbox" 
        id={id} 
        style={{marginRight: '10px'}} 
        checked={selected} 
        onClick={this.onItemClick} />
        <label htmlFor={id} onClick={this.onItemClick}>{id}</label>
      </div>
    );
  }
}

class Wrapper extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedCheckboxes: []
    };
    this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
  }

  handleCheckboxClick = (id) => {
    let newSelected = this.state.selectedCheckboxes.slice(0);
    const thisIdIndex = newSelected.indexOf(id);
    if (thisIdIndex < 0) {
      newSelected.push(id);
    } else {
      newSelected.splice(thisIdIndex, 1);
    }
    this.setState({ selectedCheckboxes: newSelected });
  }
  render() {
    let index = 0;
    const checkboxes = [
    	'id-one', 'id-two'
    ];
    return <div style={{border:'1px solid #CCC', padding: '10px'}}>
      <h1 style={{margin:'10px'}}>Selected checkboxes: {this.state.selectedCheckboxes.map(id => <b key={index++} style={{margin:'10px'}}>{id}</b>)}</h1>
      {checkboxes.map((id)=>(
      <Checkbox
        handleCheckboxClick={this.handleCheckboxClick}
        selected={this.state.selectedCheckboxes.indexOf(id) > -1}
        id={id}
      />
      ))}
    </div>;
  }
}

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