var NumBox = React.createClass({
  
  shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
    if (!! (nextProps.val % nextProps.divisor) === !!(this.props.val % this.props.divisor) ) {
      return false;
    }

    return true;
  },

  render: function() {
    var cls = (this.props.val % this.props.divisor === 0) ? "numbox active" : "numbox";
    
    return (<div className={cls}>
        {this.props.val}
    </div>);
  }
});

var App = React.createClass({
  getInitialState: function() {
    return { val: 5 };
  },
   
  setDivisor: function(val) {
    this.setState({ val: val });
  },
  
  render: function() {
    var that = this;
    return (<div className="">
        <div className="head">
          Divides By: <input type="number" value={this.state.val} onChange={(e) => this.setDivisor(e.target.value)} />
        </div>
        <div>
        {_.range(1,10000).map(function(idx) {
          return (<NumBox val={idx} divisor={that.state.val} />);})}
        </div>
      </div>);
  }
});

ReactDOM.render(<App />, document.querySelector('main'));