reactjs - Sending data to an indirect child in React.js on a click event -

i have application has 2 major components (landing , skills):

app = react.createclass({     render() {       return (            <div>             <landing />             <skills category={category}/>           </div>        );     } }); 

within "landing", have socialmenu component, has list of items (the list of items fed socialmenu like: <socialmenu items={ ['home', 'services', 'about', 'contact us']} />. on click, item clicked highlighted.

socialmenu = react.createclass({      getinitialstate: function(){         return { focused: 0 };     },      clicked: function(index){         this.setstate({focused: index});     },          var self = this;          return (             <div>                 <ul classname="testblocks">{ this.props.items.map(function(m, index){                      var style = '';                      if(self.state.focused == index){                         style = 'focused';                     }                      return <li key={index} classname={style} onclick={self.clicked.bind(self, index)}>{m}</li>;                  }) }                  </ul>                   <p>selected: {this.props.items[this.state.focused]}</p>               </div>         );      } }); 

what have happen, have index data socialmenu, passed skills component.

however, not sure how that, because socialmenu child of landing, , not of skills. (pretty keep list in landing, have output of click of list put in skills).

how this?

you need flux have communication betweeen components don't have parent-child relationship:

for communication between 2 components don't have parent-child relationship, can set own global event system. subscribe events in componentdidmount(), unsubscribe in componentwillunmount(), , call setstate() when receive event. flux pattern 1 of possible ways arrange this.

so, case, need have event select_social pass index information , landing component have listener receive index information.