New to Reactjs, Building a Game of Life, but the old board is updating with the new board

Question

First I want to pull a random board so the game starts running as soon as it renders, but for this case I have a pre-assigned layout for debugging. This three square arrangement will switch from horizontal to vertical and back infinitely.

getInitialState: function() {

var state = {
  rows: 5,
  cols: 5,
  generation: 0,
  active: false
};
var cellMatrix = [];
var cellRow = [];
/*    for (var i = 0; i < state.rows; i++) {
      for (var j = 0; j < state.cols; j++) {
        cellRow.push(Math.round(Math.random()));
      }
      cellMatrix.push(cellRow);
      cellRow = [];
    }*/

cellMatrix = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0]
];

state.board = cellMatrix;

return state;
},

Pretty simple so far. I render the page with a button that allows me to execute this.gameStep, which simulates another generation. Updated values are assigned to newBoard and the state.board is updated after the loop. The problem is that the state.board is updating to the current board state every time it loops (25 times in this case). If I were to insert a (newBoard == this.state.board) boolean, it returns true every iteration of the loop.

gameStep: function() {

var newBoard = this.state.board;

for (var i = 0; i < this.state.rows; i++) {
  for (var j = 0; j < this.state.cols; j++) {
    console.log(this.state.board);
    var check = this.checkNeighborSum(i, j, this.state.board);
    if (check == 3) {
      newBoard[i][j] = 1;
    } else if (check == 4) {
      newBoard[i][j] = this.state.board[i][j];
    } else {
      newBoard[i][j] = 0;
    }
  }
}

this.setState({
  board: newBoard
});
},

For reference, checkNeighborSum is just the actual math function. 3 is guaranteed life, 4 is life only if it is already alive (aka copy the status over), anything else is dead.

checkNeighborSum: function(x, y, board) { // x is row index, y is column index
var xMinus = x - 1;
var xPlus = x + 1;
var yMinus = y - 1;
var yPlus = y + 1;
if (x === 0) {
  xMinus = this.state.cols - 1;
}
if (x === this.state.cols - 1) {
  xPlus = 0;
}
if (y === 0) {
  yMinus = this.state.rows - 1;
}
if (y === this.state.rows - 1) {
  yPlus = 0;
}

return (board[xMinus][yMinus] +
  board[xMinus][y] +
  board[xMinus][yPlus] +
  board[x][yMinus] +
  board[x][y] +
  board[x][yPlus] +
  board[xPlus][yMinus] +
  board[xPlus][y] +
  board[xPlus][yPlus]);

},

Link incase you would rather see the whole page: link

score 0 · Answer 1 · edited May 23 '17 at 12:34

0

Maybe check this : How do I correctly clone a JavaScript object?

var newBoard = this.state.board just create an another reference to the same variable. It doesn't clone your object

edited May 23 '17 at 12:34

Community

1
1

answered Jun 08 '16 at 06:46

0xCrema.eth

887
1
9
22

score 0 · Accepted Answer · answered Jun 08 '16 at 08:53

In gameStep, you are changing this.state.board itself. I'd recommend using immutable structures, e.g. immutable.js. However, since you are only beginning, you can try cloning the state into newState using Object.assign -

var newBoard = Object.assign({}, this.state.board);

This should duplicate the board when adding it to newBoard.

New to Reactjs, Building a Game of Life, but the old board is updating with the new board

2 Answers2