The approach I’m taking for the Game of Life uses a grid of divs created with a loop in the component called ApplicationGrid.
Each div is given a “key” with an initial state of zero.
After each div is created, I need the “key” iterated by one so that all the divs have a unique value.
I have written the function called updateKey() to set the new state for key.
When and where should I call the updateKey() function? If I add it to the statement in the loop right after the new div gets pushed to rows[], all of the divs have a key of “3463”! So I am obviously not doing something correctly.
The CodePen for this is here
var ActionBox = React.createClass({
getInitialState: function() {
return {
bgColor2: 'white',
generation: 0
}
},
handleClick2: function() {
if(this.state.bgColor2 === 'white')
{this.setState({
bgColor2: 'pink',
generation: 1
})
console.log("My generation is one.")
}else{
this.setState({
bgColor2: 'white',
generation: 0
})
console.log("My generation is zero.")
}
},
render: function() {
var test = this.props.myColumnNumber;
return(
<div id="actionBox" onClick={this.handleClick2} style={{backgroundColor:this.state.bgColor2}}>
</div>
);
},
});
var ApplicationGrid = React.createClass({
getInitialState: function() {
return {
key: 0
}
},
updateKey: function() {
this.setState({
key: (this.state.key+1)
})
},
render: function() {
var row = [];
for(var j=0; j<30; j++){
for(var i=0; i<30; i++){
row.push(<ActionBox myRowNumber={j} myColumnNumber={i} pears = {this.props.oranges} divkey={this.state.key}/>);
this.updateKey();
}
}
return(
<div id="applicationGrid">
{row}
</div>
);
},
});
var ButtonsAndGrid = React.createClass({
getInitialState: function() {
return {
bgColor: 'white'
}
},
handleClick: function() {
//this.props.plethora()
this.setState({
bgColor: 'blue'
})
this.liveOrDie();
},
liveOrDie: function() {
console.log("The generation of cell 0,0 is ...")
},
render: function() {
return(
<div>
<div id="buttonsDiv">
<button type="button" ref="button1" className="normalBtn" id="btn1" onClick={this.handleClick} style= {{backgroundColor:this.state.bgColor}}>Live or Die</button>
</div>
<ApplicationGrid oranges = {this.props.apples} />
</div>
);
},
});
var MyApp = React.createClass({
getInitialState: function() {
return {
lifeordeath: 0
};
},
render: function() {
return(
<div id="mainDiv" >
<h1> Game of Life! </h1>
<ButtonsAndGrid apples={this.state.lifeordeath} /> <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')
);