Unable to choose other options in <select>, however the list of options are visible on dropdown…

Question

Here i am emiting the form values to the server, which currently works fine.However i am unable to select other values from select input apart the default option...please help!

 var Query = React.createClass({
  getInitialState(){
    return{
      value:'Sunday'
    }
  },

  change(e){
    this.setState({value: e.target.value});
  },

  join() {
    var memberName = React.findDOMNode(this.refs.name).value;
    var dayz = React.findDOMNode(this.refs.day).value;
    //emits name and day to the server....
    this.props.emit('join',{ name: memberName, day: dayz });
  },

  render(){
    return(
      <div>
        <form action="javascript:void(0)" onSubmit={this.join}>
          <input ref="name" type="text" required/>
          //unable to select other options apart the first (sunday => Wow)
          <select ref="day" onChange={this.Change} value={this.state.value}>
            <option  value="sunday">Wow</option>
            <option  value="a">ssd</option>
            <option  value="Java">Java</option>
            <option  value="C++">C++</option>
          </select>
          <button>Join</button>
        </form>
      </div>
    );
  }
});
module.exports = Query;

Answer 1

There's a typo in the <select> : it has a capital 'C' rather than a lowercase 'c' like the name of the function. Update this.Change to this.change .

<select ref="day" onChange={this.change} value={this.state.value}>