React grid

by abby_io

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.box{position: absolute}

JavaScript 1.7

var Box = React.createClass({
	render: function() {
    var pos = {
      top: this.props.box.y * 35,
      left: this.props.box.x * 35,
      width: 35,
      height: 35,
      background: this.props.colours[this.props.box.c]
    }
  	return <div className="box" style={pos} onTouchMove={() => this.props.handleChange(this.props.box.x, this.props.box.y)} onMouseEnter={() => this.props.handleChange(this.props.box.x, this.props.box.y)}></div>
  }
});

var Grid = React.createClass({
	handleChildChange: function(x, y) {
  	this.props.grid[y][x].c=1;
    this.forceUpdate()
  },
  
  render: function() {
    return (
      <div>
        {this.props.grid.map((row, y) => {
          return row.map((box, x) => {
            const b = {c: box.c, y: y, x: x};
            return <Box key={'x'+x+'y'+y} box={b} handleChange={this.handleChildChange} colours={this.props.colours} />;
          })
        })}
      </div>
    )
  }
});

var grid = [];
for(var y=0; y<10; y++) {
	grid.push([]);
	for(var x=0; x<10; x++) {
  	grid[y][x] = {c:0};
  }
}

var colours = ['#f0f', '#ccc'];

ReactDOM.render(
  <Grid grid={grid} colours={colours} />,
  document.getElementById('container')
);