Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Tic Tac Toe Example
var TicTacToe = React.createComponent({
getInitialState: function(){
return {
board : [
['', '', ''],
['', '', ''],
['', '', ''],
],
turn: 'x'
}
},
handleClick: function(row, col){
var board = this.state.board;
if (board[row][col] === ''){
board[row][col] = this.state.turn;
this.setState({
turn : this.state.turn === 'x' ? 'o' : 'x';
board: board
});
} else {
window.alert('sorry, can\'t do that');
}
}
renderBoard: function(){
//map, forEach cb(value, idx) reduce cb (memo, value, idx)
var self = this;
var board = this.state.board.map(function(row, idx){
return (
<div className={idx}>
{row.map(function(v, i){
return (
<span className={i} onClick={this.handleClick.bind(self, idx, i)}>{v}</span>
)
});}
</div>
)
});
},
render: function() {
return (
{renderBoard()}
)
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.