<main>
</main>

var Rect = React.createClass({
  propTypes: {
    val: React.PropTypes.number.isRequired,
    checkDivision: React.PropTypes.number.isRequired,
  },
  
  render() {
    var d = (this.props.val % this.props.checkDivision === 0);
    
    var style = {
      width: '40px',
      height: '40px',
      textAlign: 'center',
      lineHeight: '40px',
      display: 'inline-block',
      overflow: 'hidden',
      background: d ? 'lightgreen' : 'white',
    };
    
    return <div style={style}>{this.props.val}</div>
  }
  
});

var Clicker = React.createClass({
  getInitialState() {
    return { clicks: 0 };
  },
  
  click() {
    this.setState({
      clicks: this.state.clicks + 1,
    });
  },
  
  render() {
    return (<div>
        <p>You clicked {this.state.clicks} times. 
          <button onClick={this.click}>Click Here</button>          
        </p>
        <Rect checkDivision={3} val={this.state.clicks} />
      </div>);
  }
});

var App = React.createClass({
  render() {
    return (<div>
        <Clicker />
        <Clicker />
        <Clicker />
        <Clicker />
        <Clicker />
      </div>);
    
  }
});

ReactDOM.render(React.createElement(App), document.querySelector('main'));