Carlos Santín Carlos Santín - 3 months ago 9
React JSX Question

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

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

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.