title: Unable to change dropdown value in React child component
body: <p>I have two components:</p>
  
  <p>App component:</p>
  
  <pre class="lang-js prettyprint-override"><code>class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedScale: "WholeTone"
      };
      this.handleScaleSelect = this.handleScaleSelect.bind(this);
    }
  
    handleScaleSelect = selectedScale =&gt; {
      console.log("ss: " + selectedScale);
      console.log(this.state);
      this.setState({ selectedScale: selectedScale });
      console.log("after ss:" + this.state.selectedScale);
    }
  
    render() {
      return (
          &lt;Scales
            onSelectScale={this.handleScaleSelect}
            selected={this.state.selectedScale}
          &gt;&lt;/Scales&gt;
      )
    }
  }
  </code></pre>
  
  <p>Scales component:</p>
  
  <pre class="lang-js prettyprint-override"><code>class Scales extends Component {
    state = {
      options: []
    };
    constructor(props) {
      super(props);
      // this.getScales();
    }
  
    render() {
      return (
        &lt;form onSubmit={() =&gt; this.props.onSelectScale(this.getSelectedScale())}&gt;
          &lt;select id="scaleSelectId"&gt;&lt;/select&gt;
          &lt;input type="submit" value="render scale" /&gt;
        &lt;/form&gt;
      );
    }
  
    componentDidMount() {
      var xhr = new XMLHttpRequest();
      function addOptions() {
        var select = document.getElementById("scaleSelectId");
        JSON.parse(xhr.responseText).map(scale =&gt; {
          var option = document.createElement("option");
          option.text = scale;
          select.add(option);
        });
        select.value = this.props.selected;
      }
      xhr.open("GET", "http://127.0.0.1:5000/get_scales");
      xhr.onload = addOptions.bind(this);
      xhr.send();
    }
  }
  </code></pre>
  
  <p>I want to change dropdown value, press form's submit button and pass that value to the parent element so it is used further. I wonder what am I doing wrong. I did some logging in <code>handleScaleSelect</code> to see what's going on, and weirdly - the <code>selectedScale</code> variable is equal to the submitted value, but the state of component is not altered.</p>