reactjs - changing state doesn't re-render component - reactjs

Question

I'm using a map function to create a game board from an array of objects and calling setState on click to make the game happen. I can successfuly update the state but the view won't update until I perform a different action. I'm guessing the problem is in how the map function passes props to the child element (Cell), but I can't figure out what I'm doing wrong.
var board = [];
var width = 50;
var height = 30;
var size = width * height;
for (var i=1; i<=size; i++) {
board[i] = {id: i, status: 'dead'};
}
var Cell = React.createClass({
turn: function() {
this.props.turn(this.props.id);
},
render: function() {
return <div id={this.props.id} className={this.props.status} onClick={this.turn}></div>
}
});
var GameBoard = React.createClass({
getInitialState: function() {
return {
board: board
};
},
handleClick: function(id) {
var newBoard = this.state.board;
newBoard[id] = {id: id, status: 'alive'};
this.setState({board: newBoard});
},
move: function() {
var board = this.state.board;
var newBoard = board;
for (var j=1;j<=board.length;j++) {
if (board[j].status == 'alive') {
newBoard[j-1] = {id: j-1, status: 'alive'};
newBoard[j] = {id: j, status: 'dead'};
}
}
this.setState({board: newBoard});
},
render: function() {
var squares = this.state.board.map(function(item){
return <Cell id={item.id} status={item.status} turn={this.handleClick}/>
}.bind(this));
return (
<div>
<h1>Game of Life</h1>
<button className="btn btn-default" onClick={this.move}>Run</button>
<div className='boardContainer'>{squares}</div>
</div>
);
}
});
ReactDOM.render(<GameBoard/>,document.getElementById('app'));
http://codepen.io/Theeeus/pen/YpQzPO?editors=0010

Answer 1

The loop in your move function is off-by-one, so it throws an error before reaching the line with setState. The first two lines of the method simply assign a reference to this.state.board in the variable newBoard. Therefore, you're "updating" your state, but not correctly with setState. That's why the board updates on your next click, which calls setState in handleClick.
1) You should modify a deep copy of the state instead of the state itself
2) Fix the off-by-one-error in the for loop
var board = this.state.board;
var newBoard = board; // Note, this is a reference to this.state.board. That's bad!
for (var j=1; j<=board.length - 1; j++) { // note, -1
...
}

Answer 2

You're mutating this.state. The React docs specify that this is a no-no. Inside the GameBoard component, I'd rewrite your handleClick() and move() functions to look more like this:
handleClick: function(id) {
this.setState({
...this.state,
board: [
...this.state.board.slice(0, id),
{
id,
status: 'alive'
},
...this.state.board.slice(id + 1)
]
});
},
move: function() {
this.setState({
...this.state,
board: this.state.board.map((place, id, board) => {
const nextPlace = board[id + 1];
if (nextPlace.status === 'alive') {
return {
...place,
status: 'alive'
};
} else if (place.status === 'alive') {
return {
...place,
status: 'dead'
};
}
return place;
})
});
},
Note: these functions use some new Javascript features like the spread operator (...place) and arrow functions. It's possible that these features might result in syntax errors when you try to run this code.

Answer 3

please use
if(var i = 0;i < arr.length;i++)
,instead of
if(var i = 1;i<=arr.length;i++){}
In your question,when your j in your move function equals to board.length, it will make an error.
Change your two if cycle in your code .
I hope that I can help.
var board = [];
var width = 2;
var height = 3;
var size = width * height;
for (var i=0; i < size; i++) {
board[i] = {id: i, status: 'dead'};
}
var Cell = React.createClass({
turn: function() {
this.props.turn(this.props.id);
},
render: function() {
return <div id={this.props.id} className={this.props.status} onClick={this.turn}></div>
}
});
var GameBoard = React.createClass({
getInitialState: function() {
return {
board: board
};
},
handleClick: function(id) {
var newBoard = this.state.board;
newBoard[id] = {id: id, status: 'alive'};
this.setState({board: newBoard});
},
move: function() {
var board = this.state.board;
var newBoard = board;
for (var j=0;j < board.length;j++) {
if (board[j].status == 'alive') {
newBoard[j-1] = {id: j-1, status: 'alive'};
newBoard[j] = {id: j, status: 'dead'};
}
}
this.setState({board: newBoard});
},
render: function() {
var squares = this.state.board.map(function(item){
return <Cell key = {item.id} fuck={item.id} id={item.id} status={item.status} turn={this.handleClick}/>
}.bind(this));
return (
<div>
<h1>Game of Life</h1>
<button className="btn btn-default" onClick={this.move}>Run</button>
<div className='boardContainer'>{squares}</div>
</div>
);
}
});
ReactDOM.render(<GameBoard/>,document.getElementById('app'));
.dead{
width:10px;height:10px;border:1px solid red;margin:3px;
}
.alive{
border:1px solid green;margin:3px;width:10px;height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>