selected option in select element does not work in react - reactjs-flux

Question

Following code in react shows this error:
"Use the defaultValue or value props on ".
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
tried this but still does not work:
<select value="1">
<option value="" disabled>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Trying to implement as in doc in this link but cant make the selected work inside option. Also i am looking to make "choose your option" as a default selected option when the form first loads

Answer 1

You should keep a state variable in your component. I've written some code, and here is a live JSBin:
var MySelect = React.createClass({
getInitialState: function() {
return {
value: "0"
};
},
handleChange: function(event) {
var value = event.target.value;
console.log(value, " was selected");
this.setState({value: event.target.value});
},
render: function() {
return (
<select value={this.state.value} onChange={this.handleChange}>
<option value="0">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
);
}
})
React.render(
<MySelect />, document.body
);
Replace the console.log with a Flux event or pass the value to your parent with a callback.