React JS Get a div in a grid to change color by re-populating the main array - but its not working

React JS Get a div in a grid to change color by re-populating the main array - but its not working
0

#1

I have a grid of divs that update bases on the Game of Life Rules.

How can I get one of these divs to change colors onClick either while the game is running or while it has been paused?

I have tried several different approaches to this problem and nothing I have devised has worked.

My CodePen for this is here

var ButtonsAndGrid = React.createClass({
  getInitialState: function() {
    return {
      gameStatus: 'stopped',
      currentData: [],
      totalColumns: 30,
      totalRows: 30,
      runRate: 100,
      fastestRunRate: 10000,
      slowestRunRate: 1000,
      generation: 0,
      pausestatus: 0,
      pausebutton: 'Pause', 
      runratesetting: 'default',
      handleClickArray: []
    };
  },


  switchColors: function() {
    var evaluatedArray = this.state.currentData;
    var newArray = [];
    
    var evaltotal = this.state.totalColumns * this.state.totalRows;
    var i;
    if(this.state.pausestatus === 0){
    for ( i = 0; i < evaltotal; i++) {
      
      var adjacent = 0;
      
      if(evaluatedArray[i] === 'red'){
        if(evaluatedArray[i + this.state.totalColumns]==='red')
          {adjacent++}
          if(evaluatedArray[i + this.state.totalColumns -1]==='red')
          {adjacent++}
          if(evaluatedArray[i + this.state.totalColumns + 1]==='red')
          {adjacent++}
        if(evaluatedArray[i - this.state.totalColumns]==='red')
          {adjacent++}
          if(evaluatedArray[i - this.state.totalColumns - 1]==='red')
          {adjacent++}
          if(evaluatedArray[i - this.state.totalColumns + 1]==='red')
          {adjacent++}
          if(evaluatedArray[i + 1]==='red')
          {adjacent++}
        if(evaluatedArray[i - 1]==='red')
          {adjacent++}
      
    
          if(adjacent > 3 ){newArray.push('white');}
	          else if(adjacent < 2 ){newArray.push('white');}
	          else{newArray.push('red');}
        
      }
      
      if(evaluatedArray[i] === 'white'){
        if(evaluatedArray[i + this.state.totalColumns]==='red')
          {adjacent++}
          if(evaluatedArray[i + this.state.totalColumns -1]==='red')
          {adjacent++}
          if(evaluatedArray[i + this.state.totalColumns + 1]==='red')
          {adjacent++}
        if(evaluatedArray[i - this.state.totalColumns]==='red')
          {adjacent++}
          if(evaluatedArray[i - this.state.totalColumns - 1]==='red')
          {adjacent++}
          if(evaluatedArray[i - this.state.totalColumns + 1]==='red')
          {adjacent++}
          if(evaluatedArray[i + 1]==='red')
          {adjacent++}
        if(evaluatedArray[i - 1]==='red')
          {adjacent++}
      
    
          if(adjacent === 3 ){newArray.push('red');}
	          else{newArray.push('white');}
        
      }
      
    }
    
    this.setState({
      currentData: newArray
    });
              }else{
                      this.setState({
                            currentData: currentData
                            });
                }
   },

  componentWillMount: function() {
      this.getRandom();
   },
  componentDidMount: function() {
      this.run();
   },

  componentWillUnmount: function() {
    clearInterval(this.state.runRate);
   },

  getRandom: function() {  
     var tempArr = [],
     gridtotal = this.state.totalColumns * this.state.totalRows;
      for (var r = 0; r < gridtotal; r++) {
        tempArr.push(Math.floor((Math.random() * 2)) ? 'red' : 'white');
      }
    this.setState({
      currentData: tempArr
    });
    console.log(this.state.currentData);
   },

  run: function() {
   if (this.state.pausestatus === 0){ 
      this.setState({
        runRate: setInterval(this.switchColors, this.state.runRate)
      });
    this.updateGeneration();
    }
    console.log(this.state.gameStatus);
   },

  getNewGeneration: function() { 
    if(this.state.pausestatus === 0){
      this.setState({
        generation: (this.state.generation + 1)
      });
    }else{this.setState({
        generation: this.state.generation
      });}
    },

  updateGeneration: function() { 
    this.setState({
        generation: setInterval(this.getNewGeneration, this.state.runRate)
      });
    },

  clearAll: function() {
    this.pauseAction();
    this.setState({
      generation:0
    })
    var whiteArray = [],
    tempgridtotal3 = this.state.totalColumns * this.state.totalRows;
    
    for(var w = 0; w< tempgridtotal3; w++){
      whiteArray.push('white');
    }
    this.setState({
      currentData: whiteArray
    })
    
  },


  pauseAction: function() { 
    if(this.state.pausestatus === 0){
      this.setState({
        pausestatus: 1
        });
      this.setState({
        pausebutton: 'Start'
      });
    }else{this.setState({
        pausestatus: 0
      });
      this.setState({
        pausebutton: 'Pause'
      });
         }
  },

handleClick: function(divcolor, e){
    console.log(divcolor)
    this.setState({backgroundColor: 'blue'});
},

 toggleCell: function(divkey, e) {
var grid = this,
tempgridtotal6 = this.state.totalColumns * this.state.totalRows;
return function() {
  var temp = [];
  for (var k = 0; k < tempgridtotal6; k++)
    if(k === divkey){
      if(grid.state.currentData[k] === 'white'){temp.push('red');}
         else{temp.push('white');}
    }
    else{
    temp.push(grid.state.currentData[k].slice(0));
      }
  grid.setState({currentData: temp});
 };
 },

 render: function() {
  var tempgrid = [],
     tempgridtotal2 = this.state.totalColumns * this.state.totalRows;
      for (var x = 0; x < tempgridtotal2; x++) {
        //var boundClick = this.handleClick.bind(this, x);
        tempgrid.push(<ActionBox divkey={x} Name={x} divcolor={this.state.currentData[x]} onKlick={this.toggleCell} stateHolder={this}/>);
      }
  return (
    <div>
    <div>
        Generation: {this.state.generation}
      </div>
      <div>
        <button type="button" className="normalBtn" id="btn1" onClick={this.pauseAction} style={{backgroundColor:this.state.bgColor}} >{this.state.pausebutton}</button>
        <button type="button" className="normalBtn" id="btn1" onClick={this.clearAll} style={{backgroundColor:this.state.bgColor}}>Clear</button>
      </div>
    <div id="applicationGrid">
        {tempgrid} 
    </div>
      </div>
   );
  }
 });

var ActionBox = React.createClass({ 
 getInitialState: function() {
  return {
  backColor:this.props.divcolor
 }

 },
    render: function() {
      return(
        <div id="actionBox" index={this.props.divkey} style={{backgroundColor:this.props.divcolor}}  onClick={this.props.onKlick.bind(this.props.stateHolder, this.props.divkey)}  >
         
        </div>
      );
    },
  });

var MyApp = React.createClass({  
      getInitialState: function() {
            return {
                seed: 'default'
              }  
        },

      render: function() {
        return(
          <div id="mainDiv" >
          <h1> Game of Life! </h1>
          <ButtonsAndGrid /> <Footer />
          </div>
        );
       }, 
     });

 var Footer = React.createClass({
     render() {
          return (
              <footer>
                 <div id="containerfooter">
                  <p>Written by <a href="http://codepen.io/profaneVoodoo/full/dXBJzN/">John Gillespie</a> for FreeCodeCamp Campers (and also to impress my kids). Happy Coding!</p>
                 </div>
              </footer>
              );
            }
        });

   ReactDOM.render(
   <MyApp />  ,
   document.getElementById('GoL')
 );

#2

DISREGARD!!! I FIGURED IT OUT

 toggleCell: function(divkey, e) {
   var grid = this;
   var test = grid.state.currentData[divkey];
   var changeto;
   if (test === 'white'){changeto = 'red'}
   else{{changeto = 'white'}}
   var tempytemp = [], tempgridtotal6 = grid.state.totalColumns * grid.state.totalRows;
     for (var k = 0; k < tempgridtotal6; k++)
       {
         if(k === divkey){tempytemp.push(changeto);}
         else
         {tempytemp.push(grid.state.currentData[k]);}
       }
    grid.setState({
      currentData: tempytemp
    })

 },