Passing props from grandchildren to parent

Question

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 ?

Prehension

I can recomend you This link rly good explanation about your problem – Truly

Answer 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.

Artur

if this comment is useful please upvote, Im working on increasing my SO rep and any help or feedback would be appreciated. Thanks. – Artur

Can you explaing how to pass a value, for example an id, of clicked breadcrumbitem ? – Propriety

UPDATE: Its also worth adding that, when you are at the point where you are passing things up and down your component tree thats usually the point to start considering a state container, Redux being the most commonly used with react at the time of writing. – Artur

UPDATE 2: Its worth Pointing out this has been answered more comprehensively and recently here (both ES6 and createClass based examples): #38394515 – Artur

Answer 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

Tuition