hex.js

class HexBoard extends React.Component {
  state = {}
  onMouseDown = cell => () => {
    this.props.select && this.props.select(cell)
    this.setState({selected: cell})
  }
  onMouseOver = cell => () => {
    if (this.props.hover && this.state.hover !== cell) {
      this.props.hover(cell)
      this.setState({hover: cell})
    }
  }
  onMouseUp = cell => () => {
    this.props.move && this.props.move(this.state.selected, cell)
    this.setState({selected: null })
  }

  render() {
    const { cells, CellComponent } = this.props

    return ( 
      <div>
        {board.cells.map(cell => (
          <div
            className="some_grid_defining_class_here"
            onMouseDown={this.onMouseDown(cell)}
            onMouseDown={this.onMouseUp(cell)}
            onMouseOver={this.onMouseOver(cell)}
          >
            <CellComponent {...cell} key={cell.id} />
          </div>
        ))}
      </div>
    )
  }
}