Passing props from grandchildren to parent

I have following React.js application structure:

<App />
  <BreadcrumbList>
    <BreadcrumbItem />
  <BreadcrumbList/>
<App />

The problem is, when I click on <BreadcrumbItem /> , I want to change a state in <App />

I used callback to pass props to <BreadcrumbList/> but that`s how far I got.
Is there any pattaren how to easily pass props up to compenent tree ?

How can I pass prop to <App />, without doing any callback chaining ?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you are doing something simple then its often just better to pass the change in state up through the component hierarchy rather than create a store specifically for that purpose (whatever it may be). I would do the following:

BreadcrumbItem

var React = require('react/addons');
var BreadcrumbItem = React.createClass({

embiggenMenu: function() {
    this.props.embiggenToggle();
},

render: function() {
    return (
            <div id="embiggen-sidemenu" onClick={this.embiggenMenu} />
    );
}
});

module.exports = BreadcrumbItem ;

THEN pass it up to the parent through the BreadcrumbList component…..
 <BreadcrumbItem embiggenToggle={this.props.embiggenToggle}>

… and UP to App, then use it to set the state….
var React = require('react/addons');

var App = React.createClass({

embiggenMenu: function() {
    this.setState({
        menuBig: !this.state.menuBig
    });
},

render: function() {
    return (

        <div>

            <BreadcrumbList embiggenToggle={this.embiggenMenu} />

        </div>

        )
    }
});
module.exports = BreadcrumbItem;

This example toggles a simple boolean however you can pass up anything you like. I hope this helps.

I have not tested this but it was (quickly) ripped from a live working example.


EDIT:
As it was requested i’ll expand upon the vague: “you can pass up anything”.

If you were making a navigation menu based on an array and needed to pass up the selected item to a parent then you would do the following

var React = require('react/addons');

var ChildMenu = React.createClass({


getDefaultProps: function () {
    return {
        widgets : [
            ["MenuItem1"],
            ["MenuItem2"],
            ["MenuItem3"],
            ["MenuItem4"],
            ["MenuItem5"],
            ["MenuItem6"],
            ["MenuItem7"]
        ]
    }
},

handleClick: function(i) {
    console.log('You clicked: ' + this.props.widgets[i]);
    this.props.onClick(this.props.widgets[i]);
},

render: function() {
    return (
        <nav>
            <ul>
                {this.props.widgets.map(function(item, i) {
                    var Label = item[0];

                    return (
                        <li
                            onClick={this.handleClick.bind(this, i)}
                            key={i}>

                            {Label}
                        </li>
                    );
                }, this)}
            </ul>
        </nav>
    );
}
});

module.exports = ChildMenu;

You would then do the following in the parent:
var React = require('react/addons');

var ChildMenuBar = require('./app/top-bar.jsx');

var ParentApp = React.createClass({

widgetSelectedClick: function(selection) {
    //LOGGING
    //console.log('THE APP LOGS: ' + selection);

    //VARIABLE SETTING
    var widgetName = selection[0];

    //YOU CAN THEN USE THIS "selection"
    //THIS SETS THE APP STATE
    this.setState({
        currentWidget: widgetName
    });
},

render: function() {
        return (
                <ChildMenu onClick={this.widgetSelectedClick} />
        );
    }
});

module.exports = ParentApp;

I hope this helps. Thanks for the upvote.

Method 2

If you use Flux pattern, you can have a AppStore which listen a BREADCRUMB_CLICK event. So when you click on a BreadCrumbItem, you can execute an action which dispatch BREADCRUMB_CLICK event. When AppStore handle the event, he inform App component which update your state.

For more informations:

Flux architecture


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x