Tic-Tac-Toe using React JS

Question

I'm new to web development world, especially to React JS. Here I'm trying to create a Tic-Tac-Toe game using React JS. The problem is when I try to click, it changes all other components as well, not only one. I know it's because I pass status to all divs, but I can't figure out how do I change only clicked component.

I've searched a lot and found many Tic-Tac-Toe games which are used React JS, but I couldn't figure out how they work (mainly because of .map()). Can you guys please help with examples and explanations why you did so? And can someone explain how .map() works in React JS. I know how .map() works in general, but with React JS code I really got confused.

var Game = React.createClass({
getInitialState: function() {
    return {
        status: " ",
        turn: 'o',
        clicks: 0
    };
},


clickHandler: function() {
    var newClicks = this.state.clicks + 1;
    var newMark = newClicks%2 ? 'X' : 'O';
    if ((status === 'X' || status === 'O')){
        return;
    }
    this.setState({
        status: newMark,
        clicks: newClicks
    });
},

render: function() {
    return <div> 
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>
        <div className="box" onClick={this.clickHandler}><h1>{this.state.status}</h1></div>

    </div>
}
});

React.render(
<Game />, document.getElementById('container')
);

Try with giving separate ID's for each div and then implement your functionality. — sms
I can do it if I use separate ID's, but it will take a lot of unnecessary codes. I'm planning to do it with array and .map(). — user3053089
Please add the code you mentioned by editing your question, with the array and use of map. As written, this won't work. There's lots of great explanations of map as well, so what is it that you don't understand about it specifically? In typical cases, code iterates through an array of "something" and converts each element to a React component. — WiredPrairie

Colin Ramsay Colin Ramsay · Accepted Answer · 2015-03-30T16:19:38

Map doesn't work any differently in React to anywhere else. It's a means of transforming an array. Let's say you want to output your s with map:

var Game = React.createClass({

    onClick: function(event) {
        console.log(event.target);
    },

    render: function() {
        var tiles = [
            { number: 1 },
            { number: 2 },
            { number: 3 },
            { number: 4 },
        ];

        var tileNodes = tiles.map(function(tile) {
            return <div onClick={this.onClick} className="tile">{tile.number}</div>
        });

        return <div className="tileContainer">{tileNodes}</div>
    }
});

Here, we take an array called tiles and map its contents to an array of divs. We can then put that inside the tileContainer div. It's important to separate the React things from the stuff to do with map!

Tic-Tac-Toe using React JS

2 Answers