My Onchange Not Working With React

I have followed this documentation and have created a select tag with react. I have edited this question, If I use className='browser-default' in select it works fine. But for mate

Solution 1:

There is nothing wrong with your code. Are you sure its not working? Maybe you are assuming set state is synchronous when its not. Try logging the target.value. you can also print the state value in a callback to your setstate.

degreeChange(event){
    console.log(`event value is ${event.target.value}`);
    this.setState({degree:event.target.value}, () => {
        console.log(this.state.degree);
    });
}

Fiddle of your exact code try changing the item around. you will see that state seems to be one behind. thats because the moment where you are printing it state hasn't finished its render cycle and the state has not updated.

Fiddle of my changes

Solution 2:

I think the problem is with binding methods. In your field, change the onChange property like this. onChange={this.degreeChange.bind(this)}