CODEWITHSUNDEEP
reactjsreact-routerredux
EntrustName
EntrustName

Reputation: 523

How to communicate from Child Component to Parent Component with React Router

I have a main component App containing some children according to the routes (I use react-router) etc :

class App extends Component {

    otherClick = () => { /* run every children's `handleButton2` function */ }
    <div className="App">
         <Button handleMenuClick={this.toggleSideBar}>Button 1</Button>
         <Button handleOtherClick={this.otherClick}>Button 2</Button>
         <SideBar ref="sideBar" title="Toto"/>
          {this.props.children}
    </div>
    }

So, according to the route, App will contain some other containers such as:

class ContainerABC extends React.Component {
    constructor(props) {
        super(props);
    }
    handleButton2 = () => {
        let sc = this.refs.subCont;
        sc.setState({visible : !sc.visible});
        // Change the color of Button 2 ???
    };
    render() {
        return (
            <div>
            <SubContainer ref="subCont"/>
            </div>
        );
    }
};

The role of Button 2 depends on the current Container. In the example above, when I have a ContainerABC as child, I want that Button 2 toggles the SubContainer of ContainerABC.

How can I tell to Button 2 to do the appropriate action according to the child of the component ? And/or how can I modify Button 2 (or any trigger) from SubCont when Button 2 triggers an action on SubCont ?

Maybe using Redux ? I don't see how it could be helpful

Upvotes: 4

Views: 1842

Answers (2)

Carl Vitullo
Carl Vitullo

Reputation: 923

If the behavior of the button depends on what container is being rendered, then it sounds to me like the container should render the buttons. You could wire up some props (could even use cloneElement to put them on the children) so you can pass callbacks down that would change the behavior of the button, but that sounds like a nightmare to maintain.

You could put those buttons in a separate component (with a prop to determine what they do) and render it in the containers. That sounds much simpler to me.

Upvotes: 0

Grgur
Grgur

Reputation: 7382

Redux might help only because it can trigger an action that, in return, modifies the global state tree (e.g. redux store through a reducer). If that's the only purpose you need fulfilling, then I'd recommend against adding complexity (as much as I fancy Redux).

I assume you want a random child from {this.props.children} fire a random action once Button 2 is clicked?

Let's observe this commonly enforced React pattern: Properties flow downwards. Actions (read: callbacks) go upwards.

That said, you may want to iterate through your {this.props.children} and check for the existence of a special callback prop that adheres to your API requirements. 

React.Children.forEach(this.props.children, (child) => {
    if (typeof child.props.toggleButton2State !== "function")   {
        throw('Woah, cowboy, you need that toggleButton2State function);
    }
}

Then your button could cycle through children in the same manner and execute that function, if exists. 

handleButton2Click() {
    React.Children.forEach(this.props.children, (child) => {
        if (typeof child.props.toggleButton2State === "function")   {
            child.props.toggleButton2State.call(child, !oldState, this);
        }
    }
}

So you just called child's callback function in scope of the child with boolean state being toggled and you also passed the reference to the parent component (this).

I would strongly suggest you never manipulate the parent container from a child. You never know how your hierarchy may change.

Obviously, this is a very rough example but it should get you going. Let me know how it goes.

Upvotes: 4

Related Questions