Tic-Tac-Toe Using React JS

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 comp

Solution 1:

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!

Solution 2:

If you don't want a component to re-render you can perform a check in componentShouldUpdate

lifecycle method.