I am working on my game of life challenge and trying to implement a feature for the user to change the size of the board that the game is played on. The board itself is represented by a 2D array which I recreate every time the user selects a different size. I have implemented this function which runs when the user clicks a button to change the size of a square board:
createBoard(size){
this.setState((previousState)=>{
let {board} = previousState;
board = [];
for(let i = 0; i < size; i++){
board.push([]);
for(let j = 0; j < size; j++ ){
board[i].push(0);
}
}
return {board: board}
});
}
This works great when the user goes up in size from 20x20 to 40x40 to 80x80. The problem occurs when the user starts to go down in size from 80x80 to 40x40 etc. Its hard to describe what is happening because it is really strange. I have tried to use the setState function without the callback too and it is doing the same thing. I am now trying to do slices to remedy this, and its still happening. Any ideas? Here is my pen so you can see the issue.