import React, {PropTypes} from 'react'

class Cell extends React.Component {
  static propTypes = {
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    alive: PropTypes.bool.isRequired,
    drawingCell: PropTypes.bool.isRequired,
    onStartDrawing: PropTypes.func.isRequired,
    onDraw: PropTypes.func.isRequired
  }

  render () {
    const className = this.props.alive ? 'alive' : 'dead'
    return (
      <td className={className} onMouseDown={this.handleMouseDown} onMouseEnter={this.handleMouseEnter}></td>
    )
  }

  handleMouseDown = (event) => {
    event.preventDefault()
    this.props.onStartDrawing(this.props.x, this.props.y, !this.props.alive)
  }

  handleMouseEnter = (event) => {
    event.preventDefault()
    if (event.buttons !== 1) {
      return
    }
    this.props.onDraw(this.props.x, this.props.y, this.props.drawingCell)
  }
}

export default Cell

@@ -359,13 +359,34 @@
     
-const
+return (%0A      %3Ctd%0A       
  cla
@@ -391,19 +391,18 @@
 lassName
- = 
+=%7B
 this.pro
@@ -432,53 +432,17 @@
 ead'
+%7D
 %0A    
-return (%0A      %3Ctd className=%7BclassName%7D
+   
  onM
@@ -472,16 +472,24 @@
 useDown%7D
+%0A       
  onMouse
@@ -521,13 +521,10 @@
 ter%7D
-%3E%3C/td
+ /
 %3E%0A  

Inline a const