javascript - React issue with updating state during re-render -

i have 2 components, staticcomponent , interactivecomponent. staticcomponent shows user's information. has link edit information. link has onclick fires off handleeditclick function. replaces staticcomponent interactivecomponent has form.

var staticcomponent = react.createclass({   handleeditclick: function (event) {     event.preventdefault();     react.render(<interactivecomponent user_info={this.props.user_info}                                          form_status={'form-to-be-sent'} />,                    document);   }, }) 

the interactivecomponent sets state of user_info props. assigns state's formsubmissionstatus value 'form-to-be-sent' initial state, again props. component has handlesubmit function , render function.

var interactivecomponent = react.createclass({   getinitialstate: function() {     return {       user_info: json.parse(this.props.user_info),       formsubmissionstatus: this.props.form_status     };   },    handlesubmit: function(event, data) {     // ...   },    render: function() {     // ...   } }); 

the render function has form calls handlesubmit on submit. assigns userinfo set new props either existing user_info data in props, or updated info state, depending on submission status of form.

the render function renders either form, if status set 'form-to-be-sent', or render staticcomponent otherwise. that's because assumes form submitted.

render: function () {   var profileform = (       <form ref="form" onsubmit={ this.handlesubmit }>         <label>your name</label>         <textarea id="user_name" defaultvalue={this.state.user_info.name} ref='name' />         <button classname='greenbutton' type="submit">update</button>       </form>     );    var userinfo = this.state.formsubmissionstatus == 'form-to-be-sent' ? this.props.user_info : json.stringify(this.state.user_info);    return (     this.state.formsubmissionstatus == 'form-to-be-sent' ? profileform : <staticcomponent user_info={userinfo} />   ); } 

the handlesubmit updates user info in new associative array, , ajax post submission server. before ajax call, updates state of user info latest data, , updates formsubmissionstatus value.

handlesubmit: function(event, data) {     event.preventdefault();      var formdata = $(this.refs.form.getdomnode()).serialize(),         latestuserinfo = json.parse(this.props.user_info),         name = this.refs.name.getdomnode().value.trim(),         = this;      latestuserinfo['name'] = name;      $.ajax({       data: formdata,       datatype: "json",       url: 'form-submit',       type: "post",       beforesend: function() {         that.setstate({           user_info: latestuserinfo,           formsubmissionstatus: 'form-already-submitted'         });       }     });   } 

the problem formsubmissionstatus value doesn't seem updated in handlesubmit. can click edit, fill in form, press submit , see new data update on server, , new info in new staticcomponent. can't seem able load form again clicking on edit second time. using webdev tools, seems setstate in beforesend callback isn't updating formsubmissionstatus status.

the second time click edit, , react renders interactive component, sees there existing interactivecomponent there, reuses updating it's props , rerendering.

in example, updating it's props , rerendering nothing change it's state. there component lifecycle method componentwillreceiveprops gives opportunity transfer new props state.

so, try on interactivecomponent.

componentwillreceiveprops: function(nextprops) {     this.setstate({user_info: nextprops.user_info, formsubmissionstatus: nextprops.form_status}); }