javascript - ReactJs setState updating not in sync with what is being typed in the input box -

issue:

it's strange. type input box of child component , type "onchange" method should sending updates parent component. first thing type fails update, else type updates out of sync current input.

i'm noob reactjs , no master javascript don't know going on.

example:

here console output of object update state , new state after "setstate" was

first time trying update "value1":

object {value1: "5"} object {value1: "0", value2: "0", value3: "0", opening: "0"}

second time tryin update "value1":

object {value1: "55"} object {value1: "5", value2: "0", value3: "0", opening: "0"}

as can see first time nothing updated. second time updated partially.

code:

var calculator =      react.createclass({       getinitialstate:function(){         return {             inputvalues:{               value1: "0",               value2: "0",               value3: "0",               opening: "0"             },             outputvalues:{               buyrate: "0",               sellrate: "0",               buystoploss: "0",               buytopprofit: "0",               sellstoploss: "0",               selltopprofit: "0"               }          }     },     //not worrying updating here yet. it' child component below being funky.     update: function(update){       console.log("calculator update called");         this.setstate(           update                    );      },       render: function () {         return (           <div>             <div classname="grid">               <div classname="col fluid">                 <h2>input</h2>                 <input values={this.state.inputvalues} onclick={this.handleclick} update={this.update} value1={this.state.value1} value2={this.state.value2} value3={this.state.value3} opening={this.state.opening}/>               </div>               <div classname="col fluid">                 <h2>output</h2>                 <output />               </div>             </div>           </div>         ); } });   var input =  react.createclass({    getinitialstate:function(){       return{         value1 : this.props.values.value1,         value2 : this.props.values.value2,         value3 : this.props.values.value3,         opening : this.props.values.opening       }    },    //here update not updating first time around.     update: function(key,value){       //console.log("input update called");       var newstate = {};       newstate[key]= value;       this.setstate(newstate);       //console.log(newstate);       //console.log(this.state);     },     render:function(){         return (                 <div>                 <p><inputcomponent update={this.update} name="value1" value={this.props.values.value1} /> / <inputcomponent update={this.update} name="value2" value={this.props.values.value2}/> / <inputcomponent update={this.update} name="value3" value={this.props.values.value3}/></p>                 <p><inputcomponent update={this.update} name="value3" value= {this.props.values.opening} /></p>                 </div>             )     } });  var inputcomponent =  react.createclass({     handlechange: function(){       //console.log("handlechange called");       var newvalue = react.finddomnode(this.refs.text).value.trim();       //console.log(this.props.name);       //console.log("newvalue =");       //console.log(newvalue);       this.props.update(this.props.name,newvalue);     },     render: function() {         return <input type="text" ref="text" placeholder="enter value" onchange={this.handlechange} />;     } }); 

i figured out issue was. have beware setstate() asynchronous call. print out being called before function returned , why output seemed miss character. if want check if state being updated correctly use callback provided method setstate(function|object nextstate[, function callback]).

for example:

update: function(key,value){               console.log("input update called");               var newstate = {};               newstate[key]= value;               console.log("new state , old state before update");               console.log(newstate);               console.log(this.state);               this.setstate(newstate,this.printstate);              },             printstate: function()             {               console.log("new state after update");               console.log(this.state);              },