Why doesn't this select list render with the correct item selected based on the defaultValue

Question

I have a ReactJS component:

var RegionsList = React.createClass({

    handleChange: function () {
        var regionId = this.refs.userRegions.getD         


        

Answer 1

When the <select> is initially mounted, the default value is ''. Once an uncontrolled form component is in the DOM, React doesn't look updates to the defaultValue prop. In this case it looks like your intention is to always have the selectedRegionId state match what's shown to the user, so you may want to change defaultValue to value and add a this.setState({selectedRegionId: regionId}); call to your onChange handler; then your component state and the DOM will always be in sync.