title: How to setState with <select> after component has mounted and options have been generated?
body: <p>I have a problem where state object needs to be set after options have been generated and not only when <code>onChange</code> is triggered upon selection change. I have the following state:</p>
  
  <pre><code>this.state = {
     trailers: [],
     createTrailer: "",
  
  }
  </code></pre>
  
  <p>This populates based on what is selected in my <code>&lt;select&gt;</code> element with an <code>onChange</code> handler:</p>
  
  <pre><code>handleStateChange = (event) =&gt; {
      this.setState({[event.target.name]: event.target.value})
  }
  </code></pre>
  
  <p>It works fine, <strong>however</strong>,the  options get populated from a GET request in <code>componentDidMount()</code> and what gets selected by default when it populates does not change the state. Thus, the <code>createTrailer</code> state stays blank until I actually select something.</p>
  
  <p>How can I populate my state with the default option in a scenario where I don't change my selection but leave the default one? Because at the moment if I leave it obviously that does not work with my form submission as a blank value gets submitted.</p>
  
  <pre><code>&lt;b&gt;&lt;label&gt;Choose:&lt;/label&gt;&lt;/b&gt;
  
  &lt;select className="form-control" name="createTrailer" onChange={this.handleStateChange} id="trailerSelect"&gt;
      {
        trailers.length
            ? trailers.map(trailer =&gt; &lt;option key={trailer._id} value={trailer._id}&gt;{trailer.trailerNum}&lt;/option&gt;)
            : null
      }
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: Duplicate question does not answer my question, it explains how to handle state changes with <code>&lt;select&gt;</code> and I have done all of that correctly.</p>