ajax - React child component seems not to be rendered when parent state is updated? -

i have (probably stupid) question workflow in react did not yet understand.

i have parent component fetches data server through ajax call. 1 of return values boolean passed child component property. child component again fetches data server (ajax) according property value. somehow parent component it's changes accordingly child not re-render? doing wrong?

parent component:

var l5fmmodal = react.createclass({          getinitialstate : function() {             return {                 initrunswitch : false,                 data : []             };         },          componentdidmount: function() {             this.loaditems('l5fm/setstate', null);         },          loaditems : function(url, modalstate) {             $.ajax({                 url: url,                 contenttype: 'application/json; charset=utf-8',                 data: {modalstate : json.stringify(modalstate)},                 datatype: 'json',                 cache: false,                 success: function(data) {                     this.setstate({data: data, initrunswitch: true});                     console.log(this.state.data);                 }.bind(this),                 error: function(xhr, status, err) {                     console.error(url, status, err.tostring());                 }.bind(this)             });         },          changelistview : function() {             if (this.state.data.listview) {                 var newdata = update(this.state.data, { listview: { $set: false }  });             }             else {                 var newdata = update(this.state.data, { listview: { $set: true } });             }             this.loaditems('l5fm/setstate',newdata);         },          changedirectory : function() {             if (this.state.data.dirstate.private) {                 var newdata = update(this.state.data, {dirstate : { private: { $set: false } } });             }             else {                 var newdata = update(this.state.data, {dirstate : { private: { $set: true } } });             }             this.loaditems('l5fm/setstate',newdata);         },           render: function() {              if (this.state.initrunswitch) {                 if(this.state.data.dirstate.private) {                     var browseicon = "glyphicon-folder-open";                     var browsetext = "browse files";                 }                 else {                     console.log('undefined here');                     var browseicon = "glyphicon-briefcase";                     var browsetext = "browse private files";                 }                  if (this.state.data.listview) {                     var listicon = "glyphicon-picture";                     var listtext = "image view";                 }                 else {                     var listicon = "glyphicon-list";                     var listtext = "list view";                 }             }              return(                  <modal {...this.props} bssize="large" aria-labelledby="contained-modal-title-lg">                     <modal.header closebutton>                         <div classname="header-button-group">                             <l5fmheaderbutton buttonicon="glyphicon-cloud-upload" buttontext="upload" />                             <l5fmheaderbutton onclick={this.changelistview} buttonicon={listicon} buttontext={listtext} />                             <l5fmheaderbutton onclick={this.changedirectory} buttonicon={browseicon} buttontext={browsetext} />                         </div>                     </modal.header>                      {this.state.initrunswitch ? <l5fmmodalbody dirstate={this.state.data.dirstate} listview={this.state.data.listview} />:null}                 </modal>             );         }      }); 

child component ():

var l5fmmodalbody = react.createclass({          getinitialstate : function() {             return {                 files : []             };         },          componentdidmount: function() {             this.loadfiles('l5fm/setmodalbodystate', this.props.dirstate);         },          loadfiles : function(url, dirstate) {             $.ajax({                 url: url,                 contenttype: 'application/json; charset=utf-8',                 data: {dirstate : json.stringify(dirstate)},                 datatype: 'json',                 cache: false,                 success: function(data) {                     this.setstate({files: data});                 }.bind(this),                 error: function(xhr, status, err) {                     console.error(url, status, err.tostring());                 }.bind(this)             });         },          render: function() {              var object = this.state.files;              return(                 <modal.body>                     <grid fluid={true}>                         <row>                             {this.props.listview ? <l5fmmodalbodylistview fileobject={object} /> : <l5fmmodalbodyimageview fileobject={object} />}                         </row>                     </grid>                 </modal.body>             );         }      }); 

componentdidmount run on initial render (docs). should react subsequent prop changes inside componentwillreceiveprops.