javascript - How to two-way bind select element with prop in React -

whats approved way create select element in react, 2 way bound prop of selection containing component? default selection should present attribute of prop (may generated, because value arbitrary, , on selection prop attribute should reflect selection. also, should possible write value directly selection field.

there isn't "approved" way such, should note couple of things:

1. the change event triggered on element, not element.

2. controlled , uncontrolled components defaultvalue set differently.

this generic example of controlled dropdown menu

var mydropdown = react.createclass({      getinitialstate: function() {          return {              value: 'select'          }      },      change: function(event){          this.setstate({value: event.target.value});      },      render: function(){         return(            <div>                <select id="fruit" onchange={this.change} value={this.state.value}>                   <option value="select">select</option>                   <option value="apples">apples</option>                   <option value="mangoes">mangoes</option>                </select>                <p></p>                <p>{this.state.value}</p>            </div>         );      } });  react.render(<mydropdown />, document.body); 

and here's working demo.