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.

Was it helpful?

Solution

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!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top