<main></main>
.numbox {
display:inline-block;
border: 1px solid gray;
margin: 10px;
padding: 10px;
width: 20px;
height:20px;
text-align:center;
line-height:20px;
}
.numbox.active {
background:lightgreen;
}
var NumBox = React.createClass({
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'));
View Compiled
This Pen doesn't use any external CSS resources.