React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

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 ButtonParent extends React.Component {
	constructor(props) {
  	super(props);
    
    this.state = {
    	counter1: 0,
      counter2: 0,
      counter3: 0
    }
    
    this.onClickCounter1 = this.onClickCounter1.bind(this)
  }
  
  onClickCounter1() {
		this.setState({ counter1: this.state.counter1 + 1})
  }
  onClickCounter2() {
		this.setState({ counter2: this.state.counter2 + 1})
  }
  onClickCounter3 = () => {
		this.setState({ counter3: this.state.counter3 + 1})
  }
  render() {
    return (
    	<div>
        {this.state.counter1}
        <Button onClickCounter={this.onClickCounter1} />
        {this.state.counter2}
        <Button onClickCounter={this.onClickCounter2.bind(this)} />
        {this.state.counter3}
        <Button onClickCounter={this.onClickCounter3} />
      </div>
    );
  }
}

class Button extends React.Component {
  render() {
    return (
			<div>
        <button onClick={this.props.onClickCounter}>
          button
        </button>
			</div>
    );
  }
}


ReactDOM.render(
  <ButtonParent  />,
  document.getElementById('container')
);