React JS - Access and manipulate property in object in an array or objects

1

I have just completed the GOL challenge. Before moving on I wanted to shore up my React knowledge by writing a small app on my own.

What I want is that when a div in the grid of divs is clicked on, the changeDivColor function causes the div that is clicked on to re-render with a black background

What is happening is instead it is re-rendering the first component it comes to in the app, which in this is the button!

Why is this happening and how can I get it to re-render only the component that is clicked on???

The codepen for this is here

var ActionBox = React.createClass({

render: function() {
  return(
    <div id="actionBox" Name={this.props.divkey} onClick={this.props.clickBox.bind(this.props.stateHolder, this.props.divkey)} style={{backgroundColor:this.props.divcolor}} >
    </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(<ActionBox divkey={i} divcolor={this.state.bgColor} clickBox={this.changeDivColor} stateHolder={this}/>); 
    }
    this.setState({
      masterarray: temparray
    });
  },

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

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

  takeSnapShot: function() {

    var newArray = [];
    var newlength = this.state.masterarraylength
    for ( var x = 0; x < newlength; x++) {
      
    }

  },


 changeDivColor: function(divkey) {

        this.setState({ bgColor: 'black' });

},

  render: function() {
 
   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" >  {this.state.masterarray} </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')
   );;
2

DISREGARD!!!

I figured out a solution:

var ActionBox = React.createClass({ 

render: function() {
   return(
    <div id="actionBox" Name={this.props.divkey} onClick={this.props.clickBox.bind(this.props.stateHolder, this.props.divkey)} style={{backgroundColor:this.props.divcolor}} >
     </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' });
    },



  changeDivColor: function(divkey) {
        var temparray2= [];
    var masterlength = this.state.masterarraylength;
    for(var z=0; z<masterlength; z++){
      if(z === divkey){temparray2.push('black'); }
      else{temparray2.push(this.state.masterarray[z]);}
    }
    this.setState({
      masterarray: temparray2
    });

},

  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]} clickBox={this.changeDivColor} 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')
);