javascript - Getting ReactJS to instantly change value based on textarea? -

i have textarea users input location. then, onblur, value of weather set , result supposed change based on whatever users typed in. code works should. however, if users fire twice.

var duck = react.createclass({   getinitialstate:function() {     return {       deesfault: 'houston, texas',       setting: true,       main: '',     }   },    componentdidmount:function() {     return this.callthebase();   },    callthebase: function() {     var selfish = this;     $.get('http://api.openweathermap.org/data/2.5/weather?q='+this.state.deesfault+"&units=imperial&appid=~~appid~~", function(data){     selfish.setstate(data);     });   },    changeit: function() {     this.setstate({setting: false});   },    setsetting: function() {     this.callthebase();     this.setstate({deesfault: document.getelementbyid('section').value});     this.setstate({setting: true});   },    changesection: function() {     if (this.state.setting) {       return (<p onclick={this.changeit}>in {this.state.deesfault}</p>)}      else { return (<textarea id="section" defaultvalue={this.state.deesfault} onblur={this.setsetting} />) }     },    render: function() {     return (       <div>         {this.changesection()}         <p>the weather {this.state.main.temp}</p>       </div>     )   } }); 

as is, have type in location, blur out of it, , come in, activate it, , blur out again code want. not appear problem when use plain dummy text. when make api call, problem arises.

you calling callthebase, setting deesfault new value.

setsetting: function(){   this.callthebase();   this.setstate({deesfault: document.getelementbyid('section').value});   this.setstate({setting: true});  }, 

changing before calling callthebase not solve problem though because setstate called asynchronously:

from the documentation:

setstate() not mutate this.state creates pending state transition. accessing this.state after calling method can potentially return existing value.

what this:

setsetting: function(){       var newvalue = document.getelementbyid('section').value;       this.callthebase(newvalue);       this.setstate({deesfault: newvalue, setting: true});     }, 

and of course modify callthebase take in new value.

p.s. avoid assigning this variable able use inside function, can use arrow functions es6 instead :)

callthebase: function(newvalue){     $.get('http://api.openweathermap.org/data/2.5/weather?  q='+newvalue+"&units=imperial&appid=~~appid~~", (data) => {         this.setstate(data);     }); },