React Tic Tac Toe Example

tictactoes.jsx

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()}
        )
        
    }
});