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.