I am loading React-Select options asynchronously. Once loading is done, based on the size of options I am updating two states, "placeHolder" and "auto_focus". "placeHolder" is getting updated correctly, But not "auto_focus".
var getOptions = _.debounce((input, callback) => {
axios.get(url_large).then(function (response) {
response.data.map(function(a){
a.value = a.id;
a.label = a.title;
});
callback(null,{options :response.data,complete : true});
if(response.data.length > 1) {
this.setState({ auto_focus : true });
this.setState({ placeHolder : 'Choose From Below
Options'});
}
}.bind(this));
},250);
am able to see desired output When i log the state of "auto_focus", But not getitng updated over the screen.I tried with updating some other states also. All are working fine except "auto_focus". Could anybody let me know what's the mistake here.
Note : The initial state(either true or false) which is assigned in the constructor is being continued forever, though state is updated later.