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>

CSS

.circle {
  width: 100px;
  height: 100px;
  margin: 10px;
  border-radius: 50%;
}

.black{
  background-color: black;
}

.blue{
  background-color: blue;
}

Babel + JSX

class Example extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {clicked_index: 0};
    this.clickHandler = this.clickHandler.bind(this);
  }
  
  clickHandler(index){
    console.log(index)
  	this.setState({clicked_index: index});
  }
  
  render() {
  	const indices = [0,1]
  	return(
    	<div>
      	{
          indices.map(
        	  (i) => <Circle key={i}
                           clicked={i === this.state.clicked_index}
                           onClick={() => this.clickHandler(i)}
                   />
          )
        }
    	</div>
    );
  }
}


const Circle = (props) => (
  <div className={`circle ${props.clicked ? 'blue': 'black'}`}
  onClick={props.onClick}>
  </div>
 );


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