Cacher is the code snippet organizer for pro developers

body{
  background:#0c136beb
}


br{
 line-height:20px
}

#hide{
 visibility: hidden;
  margin-top:-27px
}

#board{
     border: 10px solid #790000;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-top: 5px;
    background-color: #da1414;
    min-width: 100px;
    display: inline-block;
    padding-right: 5px;
          box-shadow: 0px -4px 40px 1px rgba(255, 255, 255, 0.98), 0 6px 20px 0 rgb(173, 173, 173);
  
}

#bottomBoard{
  
}

#topBoard{
display:block;
  margin:0 auto;
 width:600px;
}



#bottomBoard{
display:block;
  margin:0 auto;
    width:600px;

}
#gen{
  color:white;
  font-size:30px
}

#app{
  text-align:center;
}


button {
    background-color:#1D1F20;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
  margin-right:5px;
    display: inline-block;
  cursor:pointer;
    font-size: 16px;
}

button:hover{
  background: #da1414;
  
  color:white;
  font-weight:bold;
    padding:50x
}

span{
   color:white;
  font-size:30px;
    font-family:roboto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

var k

const Cell = React.createClass({
//   set initial size of the board
  getInitialState() {
    return {
      row: 65,
      col: 65,
      initialRender:0,
      generations:0,
      clearingBoard:0,
      gameStarted:0
    };
  },
  handleClick(evt) {
    var id = evt.target.id.split(" ");
    var i = parseInt(id[0]);
    var j = parseInt(id[1]);
    
    $("#0 0").css( "backround", "pink" );
    var newBoard = this.state.BoardState;

    if (newBoard[i][j] == 0) {
      newBoard[i][j] = 1;
    } else {
      newBoard[i][j] = 0;
    }

    this.setState({
      BoardState: newBoard,
      generations:this.state.generations-1
    });
  },
  handleStart(){
   
    k=setInterval(this.handleGame,300)
  },
  handlePause(){
    clearInterval(k)
  },
  handleGame(){
   
    
    var currentB=this.state.BoardState
    var nextGen=[]
    var r=this.state.row
    var c=this.state.col
    function find(z,x) {
      var len
      if(x=="i"){
        len=c
      }
      if(x=="j"){
        len=r
      }
      
      
      if (z < 0) {
        z = z % len + r;
      }
      

      if (z >= r) {
        z = Math.abs(z) % len;
      }

      return z;
    }
    function conway(y) {
     
      var arr = y.slice(0);

      var ngen = [];

      for ( var i = 0; i < r; i++) {
        var ab = [];
        for (var j = 0; j < c; j++) {
          ab.push(0);
        }
        ngen.push(ab);
      }

      for (var i = 0; i < r; i++) {
        for ( var j = 0; j < c; j++) {
          var sum = 0;

          

          var a = find(i - 1,"i");
          var b = find(j - 1,"j");
          sum += arr[a][b];
          
          var a = find(i,"i");
          var b = find(j - 1,"j");
          sum += arr[a][b];
         
          var a = find(i + 1,"i");
          var b = find(j - 1,"j");
          sum += arr[a][b];
        
          var a = find(i - 1,"i");
          var b = find(j,"j");
          sum += arr[a][b];
        
          var a = find(i,"i");
          var b = find(j,"j");
          sum += arr[a][b];
         
          var a = find(i + 1,"i");
          var b = find(j,"j");
          sum += arr[a][b];
        
          var a = find(i - 1,"i");
          var b = find(j + 1,"j");
          sum += arr[a][b];
         
          var a = find(i,"i");
          var b = find(j + 1,"j");
          sum += arr[a][b];
          
          var a = find(i + 1,"i");
          var b = find(j + 1,"j");
          sum += arr[a][b];
         
          if (sum == 3) {
            ngen[i][j] = 1;
             var elem = document.getElementById(i+ " "+j);
            elem.style.background="red"
          } else if (sum == 4) {
            
            ngen[i][j] = arr[i][j];
          } else {
            
           
            ngen[i][j] = 0;
          }
        }
      }

      nextGen = ngen.slice(0);
     

       
    }
    
    conway(currentB)
    
this.setState({
      BoardState:nextGen
       })
    
    
  },
handleClear(){
  this.handlePause();
 this.setState({
   generations:0,
  
 })
    var board = [];
    for (var i = 0; i < 80; i++) {
      var dummy = [];
      for (var j = 0; j < 80; j++) {
        dummy.push(0);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
},
  handleSizeA(){
   this.handlePause()
     this.setState({
      row: 30,
       col:30
    });
    
    var board = [];
    for (var i = 0; i < 30; i++) {
      var dummy = [];
      for (var j = 0; j < 30; j++) {
        dummy.push(Math.random() < 0.85 ? 0 : 1);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
   
   
    this.handleStart()
  },
  handleSizeB(){
   
    this.handlePause()
     this.setState({
      row: 40,
       col:40
    });
    
    var board = [];
    for (var i = 0; i < 40; i++) {
      var dummy = [];
      for (var j = 0; j < 40; j++) {
        dummy.push(Math.random() < 0.85 ? 0 : 1);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
    
   
    console.log(this.state.BoardState)
   
    this.handleStart() 
    
    
  },
   handleSizeC(){
     this.handlePause()
     this.setState({
      row: 60,
       col:60
    });
     console.log(this.state.row + " " + this.state.col)
   var board = [];
    for (var i = 0; i < 60; i++) {
      var dummy = [];
      for (var j = 0; j < 60; j++) {
        dummy.push(Math.random() < 0.85 ? 0 : 1);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
     
      console.log(this.state.BoardState)
     
    this.handleStart()
     
  },
  
  componentWillMount() {
    var board = [];
    for (var i = 0; i < this.state.row; i++) {
      var dummy = [];
      for (var j = 0; j < this.state.col; j++) {
        dummy.push(Math.random() < 0.85 ? 0 : 1);
      }
      board.push(dummy);
    }

    this.setState({
      BoardState: board
    });
  },
  render() {
//     increment generations after every render
    if(this.state.initialRender==0){
       this.handleStart()
      this.setState({
        initialRender:1
      })
    }
   
   
    if(this.state.generations>0){
      
    }
     
   this.state.generations+=1;
       
    
   
//     reset board
    
   
    
    
    var Board = [];
    var bState = this.state.BoardState;
   

    for (var i = 0; i < this.state.row; i++) {
      for (var j = 0; j < this.state.col; j++) {
        var style = {
      height: "11px",
      width: "11px",

      display: "inline-block",
      border: "1px solid #222"
    };
        
        if (bState[i][j] == 0) {
          style.background = "black";
        }
        if (bState[i][j] == 1) {
          style.background = "pink";
        }

        Board.push(
          <div class="cells" onClick={this.handleClick} style={style} id={i + " " + j} />
        );
      }

      Board.push(<div id="hide">i</div>);
    }
  

    return (
      <div>
        <div id="topBoard">
        <button onClick={this.handleStart}>Start</button>
         <button onClick={this.handlePause}>Pause</button>
          <button onClick={this.handleClear}>Clear</button>
          <span id="gen"> Generations: {this.state.generations-1}</span>
        </div>
        <br />
       
        <br />
        
        <div id="board">{Board}</div>
         
        <br />
        <br />
       <div id="bottomBoard">
         <span>Change Size :</span>
        <button onClick={this.handleSizeA}>30 X 30</button>
         <button onClick={this.handleSizeB}>40 X 40</button>
         <button onClick={this.handleSizeC}>60 X 60</button>
        
        </div>
        
      </div>
    );
  }
});

ReactDOM.render(<Cell />, document.getElementById("app"));

<div id="app"></div>