React Function updates the state just when it's called Twice

Question

I'm trying use a input to update the number of items of a list. Right now my code is updating the input value correctly but the array that i'm using to generate the list is updating only if I call the OnBlur event twice. I don't know where I'm failing. I used the OnChange event and the problem is the same. The function that handles the update logic is UpdateList

Heres the jsBin working http://jsbin.com/favabamitu/edit?html,js,console,output

Here's my code:

var InputData = React.createClass({
  getInitialState: function() {

    return({
      number_of_locations: 4,
      thickness_m: []
    });

  },

  componentDidMount: function() {
    for (var i = 0; i < this.state.number_of_locations; i++) {
      this.state.thickness_m.push(0);
      console.log("state has been intitialized");
    }
  },

  UpdateList: function(event)  {

    var value = event.target.value;

    var locations = parseInt(this.state.number_of_locations);
    console.log("local locations value is "+ locations);
    var thickness = this.state.thickness_m;

    if (locations > thickness.length) {

      var dif = locations - thickness.length;
      for (var i = 0; i < dif; i++) {
        thickness.push(0);
      }
      console.log('up with' + dif + 'dif');

    } else if (locations < thickness.length) {

      var dif = thickness.length - locations;
      thickness.splice(0, dif);
      console.log('down with' + dif + 'dif');

    }

    this.setState({
      number_of_locations: value,
      thickness_m: thickness
    });
  },

  Lister: function(number, index) {
    return (
        <li key = {index}> {number}</li>
    );
  },

  render: function() {
    var thickness_values = this.state.thickness_m

    return (
      <div className="row">
          <div className="col-md-6">
              <div className="component">
                  <div className="form-group">
                      <label htmlFor="read-method">Reading Method</label>
                      <select className="form-control" name="read-method" id="read-method" required>
                          <option value="--">--</option>
                          <option value="1">Point Thickness Readings - PTR</option>
                          <option value="2">Critical Thickness Profiles - CTP</option>
                      </select>
                  </div>
                  <div className="form-group">
                      <label htmlFor="number-of-locations">Number of Locations</label>
                      <input onBlur={this.UpdateList}
                          defaultValue={this.state.number_of_locations}
                          className="form-control"
                          type="number"
                          max="50"
                          min="1"
                          id="number-of-locations"/>
                  </div>
                  <div className="form-group">
                      <label htmlFor="separation">Separation</label>
                      <input className="form-control" type="number" id="separation"/>
                  </div>
                  <div className="form-group">
                      <ul>
                          {thickness_values.map( this.Lister )}
                      </ul>
                      <small>your list now has {this.state.number_of_locations} items</small>
                  </div>
              </div>
          </div>
          <div className="col-md-6">
              hello
          </div>
      </div>
    )
  }
}) 



ReactDOM.render( <InputData /> ,
  document.getElementById('input-measurement-data')
);

<div id="input-measurement-data">
  <!-- This element's contents will be replaced with your component. -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Any help would be greatly appreciated!

Answer 1

Change this line:

var locations = parseInt(this.state.number_of_locations);

to

var locations = parseInt(value);

For your code it is updated in next onChange, because you are updating this.state.number_of_locations at the end of function UpdateList but calculating number of locations before this update.

BTW, updating this state before locations calculation wouldn't help, because of this React feature:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.