React JS How do I get the background color of a div in an array of divs when I know the key for the div?

1

I am trying to get a function called getCurrentDivColor to return the background color of a div in an array of divs when the divkey is known. What’s the syntax to do this?

The CodePen for this is here

Here is the data structure for each element of the array:

Object {
  $$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    clickBox: function () { [native code] },
    divcolor: "white",
    divkey: 659,
    stateHolder: Object {}
  },
  ref: null,
  type: function (e,n,r)   {this.__reactAutoBindPairs.length&&c(this),this.props=e,this.context=n,this.refs=v,this.updater=r||m,this.state=null;var o=this.getInitialState?this.getInitialState():null;"object"!=typeof o||Array.isArray(o)?p("82",t.displayName||"ReactCompositeComponent"):void 0,this.state=o}
}

Here is the code:

var ActionBox = React.createClass({ 
  getInitialState: function() {
  return {
     bgColor2: 'white'
   }  
 },
   handleClick2: function() {
    if(this.state.bgColor2 === 'white')
    {this.setState({
     bgColor2: 'black'
    }) 
     }else{
    this.setState({
      bgColor2: 'white'
     })
     }
   },

 render: function() {
   return(
    <div id="actionBox" Name={this.props.divkey} onClick={this.handleClick2} style={{backgroundColor:this.state.bgColor2}} >
      </div>
  );
  }, 
});


var ButtonsAndGrid = React.createClass({ 

getInitialState: function() {
  return {
    bgColor: 'white',
    masterarray : [],
      masterarraylength : 20001
    }  
  },

  componentWillMount: function() {
      this.getBlankArray();
      },

  getBlankArray: function() {
     var temparray= [];
     var masterlength = this.state.masterarraylength;
     for(var i=0; i<masterlength; i++){
       temparray.push('white'); 
     }
     this.setState({
      masterarray: temparray
     });
  },

  gotClicked: function() {
    this.setState({ bgColor: 'blue' });
    this.takeSnapShot();
    },

  gotUnClicked: function() {
      this.setState({ bgColor: 'white' });
   },

takeSnapShot: function() {
 var testcurrentcolor;
  var w = 0;
  testcurrentcolor = this.getCurrentDivColor(w);
  console.log( "The color of the very first block is " + testcurrentcolor);
   },

 getCurrentDivColor: function(w) {
  var divKeyNum = w;
   var divBackgroundColor = document.getElementByName(w).state.Object.props.divcolor; 
   return divBackgroundColor;
  },


},

   render: function() {
    var tempgrid = [];
    var masterlength = this.state.masterarraylength;
    for(var i=0; i<masterlength; i++){
       tempgrid.push(<ActionBox divkey={i} divcolor={this.state.masterarray[i]} stateHolder={this}/>); }
  return(
  <div>
  <div id="buttonsDiv">
    <button type="button" ref="button1" className="normalBtn" id="btn1" onMouseDown={this.gotClicked} onMouseUp={this.gotUnClicked} style={{backgroundColor:this.state.bgColor}}>Take Snapshot</button>  
    </div>  <div id="applicationGrid" >  {tempgrid} </div>
  </div>
   );
  } 
});

var MyApp = React.createClass({     
render: function() {
  return(
  <div id="mainDiv" >
  <h1> Background Array Maker </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 rendering non-procedural backgrounds (for rendering background image arrays manually)</p>
    </div>
      </footer>
    );
  }
  });

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