I’m currently doing the Game of Life project. Here is a link to the repo if any of you need to check out the rest of the code. But let me get straight to where I’m running into an issue:
My parent component, App.js, houses my initialization and update logic of my game board. The flow starts off with building a randomized board and then setting the app state with that board. Then, right before the Culture or board component is rendered, I run my update method.
import React, { Component } from 'react';
import Culture from './Culture.js';
import './App.scss';
class App extends Component {
constructor() {
super()
this.state = {
boardState: null
}
}
componentWillMount() {
var boardState = [];
const random = () => {
return Math.round(Math.random() * (1 - 0 + 1) + 0)
}
for(var i = 0; i < 10; i++) {
//create y axis by pushing state values to inner arrays
boardState.push([]);
for(var j = 0; j < 10; j++) {
//create x axis by pushing state values to inner arrays
boardState[i].push(random());
}
console.log(boardState[i]);
}
boardState[-1] = [];
boardState.push([]);
this.setState({ boardState: boardState });
console.log(this.state.boardState);
for(let i = 0; i < boardState[0].length; i++) {
boardState[-1].push('NULL');
boardState[boardState.length -1].push('NULL');
}
}
processBoardState() {
const boardState = this.state.boardState;
var neighbors = 0;
//check for neighbors and tally the amount
for(let y = 0; y < boardState.length; y++) {
for(let x = 0; x < boardState[y].length; x++) {
console.log('['+ y + ']' + '[' + x + ']');
try {
switch (boardState) {
case boardState[y-1][x-1] !== 0 && boardState[y-1][x-1] !== 'NULL':
console.log('['+ y - 1 + ']' + '[' + x -1 + ']');
neighbors++;
console.log(neighbors);
break;
case boardState[y][x -1] !== 0 && boardState[y][x-1] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y + 1][x - 1] !== 0 && boardState[y + 1][x - 1] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y - 1][x] !== 0 && boardState[y - 1][x] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y][x] !== 0 && boardState[y][x] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y + 1][x] !== 0 && boardState[y + 1][x] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y - 1][x + 1] !== 0 && boardState[y - 1][x + 1] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y][x + 1] !== 0 && boardState[y][x + 1] !== "NULL":
neighbors++;
console.log(neighbors);
break;
case boardState[y + 1][x + 1] !== 0 && boardState[y + 1][x + 1] !== "NULL":
neighbors++;
console.log(neighbors);
break;
default:
break;
}
} catch(e) {
console.log(e);
}
if(neighbors < 2) {
boardState[y][x] = 0
} else if(neighbors === 3 && boardState[y][x] === 0) {
boardState[y][x] = 1
} else {
boardState[y][x] = 0
}
}
}
console.log(boardState + ' after processing of generations');
this.setState({ boardState });
}
//Board component named Culture
render() {
return (
<div>
<h1>"Game of Freakin' Life"</h1>
<Culture boardState={this.state.boardState}/>
</div>
)
}
}
export default App;
The problem I am running into is that the board variable in componentWillMount() is getting updated but when I try to update the state with that variable, it doesn’t get updated. I did checkout the in-depth documentation here: https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html and it did mention that you can set the state within componentWillMount(). Would there be a case where you can’t do it? Or is it something more deeper than what I can see?
Thanks in advance for y’all help