Communicate a change in one of children to parent's parent

Question

This is how my "hierarchy" looks:

Game
    Table
        TableRow
            Cell

When a cell is clicked on, I want to run a method from Game. React's design is a bit different than what I'm used to and I just can't wrap my mind around communicating a change in Cell back to Game. What's the best way to do this?

FYI, I'm trying to create Ultimate TTT in React.js.

Answer 1

What you could do is pass a pointer to the Game function, as a property, to the Child component. For example:

var Game = React.createClass({
    gameFunction: function() {
        alert('gameFunction()');
    },
    render: function() {
        return (
            <div className="game">
                <h1>Game</h1>
                <Table gameFunction={this.gameFunction} />
            </div>
        );
    }
});

var Table = React.createClass({
    render: function() {
        return (
            <div className="table">
                <table>
                    <tr>
                        <td onClick={this.props.gameFunction}>Cell</td>
                    </tr>
                </table>
            </div>
        );
    }
});

That being said, I'm brand new to React, and am not sure if this is the correct way to accomplish this!