javascript - Select returns wrong value on initial change -

i'm using react, jquery, , newsapi. request , state should change when user updates option selected. however, when onchange function executes returns wrong value. after function executes again value off 1 index. can point me in right direction without being rude :).

import react, { component } 'react'; import $ 'jquery'; import posts './components/posts'; import './style/content.scss';   class content extends component {      constructor(props){         super(props);         this.state = {             posts: [],             value: 'the-verge'         }          this.change = this.change.bind(this);     }      //ajax request     getnews() {         $.ajax({             url: 'https://newsapi.org/v1/articles?source='+ this.state.value + '&sortby=latest&apikey=' + api,             datatype: 'json',             cache: true,             success: function(data) {                 this.setstate({ posts: [data] }, function() {                     console.log(data);                 })             }.bind(this),             error: function(xhr, status, err) {                 console.log(err);             }         })     }      // change request depending on selected option     change(event){         event.preventdefault();         this.setstate({value: event.target.value});         this.getnews();     }      componentwillmount(){         this.getnews();     }      componentdidmount() {         this.getnews();     }      componentwillreceiveprops(){         this.change();     }      render() {         return (             <div classname="content">                 <div classname="search">                     <h2>it's in 1 place</h2>                     <div classname="search__wrap">                         <select value={this.state.value} onchange={this.change}>                             <option defaultvalue value="the-verge">tech verge</option>                             <option value="techcrunch">tech crunch</option>                             <option value="time">time</option>                             <option value="bbc-sport">bbc sport</option>                         </select>                     </div>                 </div>                 <posts posts={this.state.posts} />             </div>         );     } }  export default content; 

i'm not sure if correct or not, it's apparent me skimming on code.

one important thing setstate is not inherently synchronous. since there may multiple setstate calls in 1 function, batched , performed asynchronously. possible state hasn't updated when getnews called.

solution? pass value explicitly getnews function.

change(event){     event.preventdefault(event.target.value);     this.setstate({value: event.target.value});     this.getnews(); } 

and then:

getnews(value) {     $.ajax({         url: 'https://newsapi.org/v1/articles?source='+ value + '&sortby=latest&apikey=' + api,         datatype: 'json', ... 

that way don't have worry race condition of setstate being finished before can use function.

you'll have use this.state.value in componentdidmount or componentwillmount. small tip: need fetch api on 1 of those, choose 1 want use , remove other one, it's redundant :)

also, calling this.change in componentwillreceiveprops trigger error because you're not passing in event.