Update the value of a dropdown menu in ReactJS -

in html form, have select menu. it’s profile user can edit later , change values. here firstcomponentcode rendering form:

export const firstcomponent = react.createclass({     handlelanguagecode: function(langvalue) {         this.setstate({             language: langvalue         });     },      renderfield() {      return (             <div>                 <selectlanguage onselectlanguage={this.handlelanguagecode} defvalue={getvalue()} />              </div>              );                } )} 

if user wants edit form, getvalue() send current value selectlanguage component. following code component:

import { dropdownlist } 'react-widgets';     export const selectlanguage = react.createclass({         getinitialstate: function(){             return{                 value: '',             };         },          handlelangchange: function (val) {             var name = val.name             //this.props.onselectlanguage(val.id); //???             //this.props.defvalue(name);           //???             //this.setstate({defvalue: name});    //???             //this.state.value = defaultval       //???         },          componentwillmount() {             this.componentwillreceiveprops(this.props);         },          componentwillreceiveprops(props) {             var def = this.props.defvalue || 'eng';             this.setstate({value:def});         },          render() {             const languages = [{"id": "eng", "name": "english"}, {"id": "swd", "name": "swedish"}] // it's big json array!!                 return (                     <div >                         <dropdownlist                              ref='dropdown'                             data={languages}                              valuefield='id'                             textfield={item => item.name}                             casesensitive={false}                              filter={this.filterlanguage}                             value={this.state.value}                             onchange={this.handlelangchange} />                     </div>                             );         }     }); 

the problem when user selects new value dropdown menu, doesn't update it!! still shows previous value. don't know how write handlelangchange function handle it. tried several ways couldn't result :/ can me fix it?

you need use this.props.onselectlanguage(val.id);

you need binding well, so:

onselectlanguage={this.handlelanguagecode.bind(this)}  onchange={this.handlelangchange.bind(this)}  

ref: https://facebook.github.io/react/tips/communicate-between-components.html