javascript - ReactJs tries to attach onclick handler before Ajax loads element -

i creating dynamic list menu in reactjs. data each menu item bing pulled in json file via ajax. want menu close when menu item clicked. giving whole list prop "whenclicked" when 1 of menu items clicked. below code:

var menulist = react.createclass({     getinitialstate: function() {         return {data: []}     },     componentwillmount: function() {         $.ajax({             url: 'http://10.0.0.97:8888/public-code/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} />         });         return (             <ul id="menu-list">                 {list}             </ul>         )     } }); 

the "whenclicked" prop triggers function in parent menu called "handleclick" changes state of menu , closes if open. here code parent menu component contains menulist component above:

module.exports = 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>          )     }  }); 

the problem entire script breaks before ajax call fires , following error:

uncaught typeerror: cannot read property 'whenclicked' of undefined 

since not see ajax "fail" message in console suspect problem react trying wire

onclick={this.props.whenclicked} 

before data loaded.

is there way solve this? there else missing?

the problem has nothing ajax call or react.

inside callback pass .map, this refers global object, not component. global object doesn't have prop property, hence error.

you can use .bind bind this value of function component:

this.state.data.map(function(...) { ... }.bind(this)); 

more info: how access correct `this` context inside callback?