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

Question

Issue:

It's strange. I type into the input box of the child component and as I type the "onChange" method should be sending the updates to the parent component. The first thing I type fails to update, but then anything else I type updates but is out of sync with the current input.

I'm a noob to Reactjs and no master to JavaScript so I don't know what is going on.

Example:

Here is an console output of my object to update the state and the new state after "setState" was

First time trying to update value1:

Object {value1: "5"}

Object {value1: "0", value2: "0", value3: "0", opening: "0"}

Second time tryin to update value1:

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

As you can see the first time nothing updated. Then the second time it 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 about updating here yet. It' the child component below that is being funky.
    update: function(update){
      console.log("Calculator update was 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 is the update that is not updating the first time around. 
   update: function(key,value){
      //console.log("Input Update was 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 was 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} />;
    }
});

Answer 1

I figured out what the issue was. You have to beware that setState() is an asynchronous call. My print out was being called before the function returned and that is why the output seemed to miss a character. If you want to check if your state is being updated correctly use the callback provided for the method setState(function|object nextState[, function callback]).

For example:

update: function(key,value){
              console.log("Input Update was Called");
              var newState = {};
              newState[key]= value;
              console.log("New state and 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);

            },