reactjs - Changing state in 'uncle' component? -

on 1 of routes, have list of items, can click on more details in 'detail' view. both list , detail view shown simultaneously.

hierarchy:

                   (page wrapper component)                  /   \     (list view) b      c (detail view)               / | \ (list items) d.....z  

i have click event on d..z should change state in component c, show data of clicked list item

conceptually, how should accomplished, given react's emphasis on unidirectional dataflow?

you should try put state high component tree can.

in case, information item selected should stored in state of wrapper component, since ancestor of both detail view component , list items components.

here's example implementation page wrapper component:

var pagewrapper = react.createclass({     getinitialstate() {         return {             selecteditem: null,         };     },      _handleitemclick(selecteditem) {         this.setstate({ selecteditem });     },      render() {         return (             <div>                 <listview items={[...]} onitemclick={this._handleitemclick} />                 <detailview item={this.state.selecteditem} />             </div>         );     }, });