javascript - Passing props from grandchildren to parent -

i have following react.js application structure:

<app />   <breadcrumblist>     <breadcrumbitem />   <breadcrumblist/> <app />  

the problem is, when click on <breadcrumbitem /> , want change state in <app />

i used callback pass props <breadcrumblist/> that`s how far got. there pattaren how pass props compenent tree ?

how can pass prop <app />, without doing callback chaining ?

if doing simple better pass change in state through component hierarchy rather create store purpose (whatever may be). 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 parent through breadcrumblist component.....

 <breadcrumbitem embiggentoggle={this.props.embiggentoggle}> 

... , app, use set 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 simple boolean can pass like. hope helps.

i have not tested (quickly) ripped live working example.

---

edit: requested i'll expand upon vague: "you can pass anything".

if making navigation menu based on array , needed pass selected item parent 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 following in 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 use "selection"     //this sets app state     this.setstate({         currentwidget: widgetname     }); },  render: function() {         return (                 <childmenu onclick={this.widgetselectedclick} />         );     } });  module.exports = parentapp; 

i hope helps. upvote.