javascript - ReactJs - Why wont child event change state of parent? -

i have created menu component in reactjs. can see, parent component has method called "handleclick toggles "open state" of menu, opening , closing accordingly.

now, trying pass click event child component "menuitem" (which link in menu) parent "menu" component when 1 of menu items clicked menu closes.

i have tried in number of ways. @ moment, have bound click event of each "menuitem" in "menulist" (the list of menuitems) prop called "whenclicked" , bound "whenclicked" "handleclick" method of "menu".

the problem seems have no effect on "menu". neither react tool in chrome, nor regular dev console giving me errors menu not close when click 1 of menuitems. react tool in chrome allows me view virtual dom , can see of onclick functions defined.

below code. can see, using same methodology pass click event different component ("menutoggle") "menu". oddly enough works fine , clicking on toggle button changes state of "menu" , opens , closes menu. using "react-scroll" module "menuitem" maybe issue. light can shed on helpful , love know doing incorrectly!

var menu = react.createclass({      getinitialstate: function() {         return {open: false, mobi: false}     },     handleclick: function() {         this.setstate({open: !this.state.open})     },     closeonmobiscroll: function() {         /*         if(this.state.mobi === false) {             this.setstate({open: false})         }         */     },     updatedimensions: function() {         $(window).width() >= 767 ? this.setstate({mobi: true}) : this.setstate({mobi: false});     },     componentwillmount: function() {         this.updatedimensions();     },     componentdidmount: function() {         $(window).on("resize", this.updatedimensions);     },     componentwillunmount: function() {         $(window).on("resize", this.updatedimensions);     },     render: function() {         return (              <div id="menu" classname={(this.state.open ? 'open' : '')} >                 <div id="menu-inner-wrap">                     <menutitle />                     <menutoggle whenclicked={this.handleclick}/>                     <menulist whenclicked={this.handleclick}/>                 </div>             </div>          )     }  });  module.exports = menu;  var menuitem = react.createclass({      render: function() {         return (             <li classname="menu-link">                 <link to={this.props.menulink} spy={true} smooth={true} duration={500}>                     <i classname={this.props.icon}></i>                     <span classname="menu-link-text">{this.props.menutitle}</span>                 </link>             </li>         );     } });  var menulist = react.createclass({     getinitialstate: function() {         return {data: []}     },     componentwillmount: function() {         $.ajax({             url: 'http://10.0.0.97:8888/public-code/react.cv/data/data.json',             datatype: 'json',             success: function(data) {                 this.setstate({data: data});             }.bind(this),             error: function(xhr, status, error) {                 var err = json.parse(xhr.responsetext);                 console.log(err.message);             }         });     },     render: function() {         var list = this.state.data.map(function(menuitemprops) {             return <menuitem onclick={this.props.whenclicked} {...menuitemprops} key={menuitemprops.id} />         }.bind(this));         return (             <ul id="menu-list">                 {list}             </ul>         )     } }); 

it seems still need bind onclick dom handle. adding onclick attribute menuitem allows have prop inside menuitem, still need bind it:

var menuitem = react.createclass({      render: function() {         return (             <li classname="menu-link" onclick={this.props.onclick}>                 <link to={this.props.menulink} spy={true} smooth={true} duration={500}>                     <i classname={this.props.icon}></i>                     <span classname="menu-link-text">{this.props.menutitle}</span>                 </link>             </li>         );     } }); 

}

in above example, onclick added li:

<li classname="menu-link" onclick={this.props.onclick}> 

the best example in documentation of behaviour in expose component functions.

in example can see todo child component binds div , bubbles in similar way:

var todo = react.createclass({   render: function() {     return <div onclick={this.props.onclick}>{this.props.title}</div>;   },    //this component accessed parent through `ref` attribute   animate: function() {     console.log('pretend %s animating', this.props.title);   } });