title: React-Bootstrap set value of FormControl Select
body: <p>I have a FormControl which is a Select that I am using in a form. It works fine when adding a new resource, but when I want to edit an existing record I need to set the value of the control. I'm not seeing a good way to set the value of the select / combobox. This is what my JSX looks like.</p>
  
  <pre><code>&lt;FormGroup controlId="group"&gt;
      &lt;ControlLabel&gt;Group&lt;/ControlLabel&gt;
      &lt;FormControl componentClass="select" placeholder="Group"
                   inputRef={ref =&gt; { this.groupSelect = ref; }}
                   onChange={this.groupSelect}&gt;
          &lt;option&gt;&lt;/option&gt;
          {
              this.state.groups.map(function (group) {
                return &lt;option key={group.id} value={group.id}&gt;{group.name}&lt;/option&gt;
              })
          }
      &lt;/FormControl&gt;
  &lt;/FormGroup&gt;
  </code></pre>
  
  <p>I've tried to access the component this way but it comes up undefined.</p>
  
  <pre><code>console.debug(this.groupSelect);
  this.groupSelect.value(1);
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>I'm trying the following, but this doesn't appear to be working either because I don't have access in the state, calling bind causes an error.</p>
  
  <pre><code>&lt;FormGroup controlId="group"&gt;
      &lt;ControlLabel&gt;Group&lt;/ControlLabel&gt;
      &lt;FormControl componentClass="select" placeholder="Group"
                   inputRef={(ref) =&gt; { this.state.groupSelect = ref }}
                   onChange={this.groupSelect}&gt;
          &lt;option&gt;&lt;/option&gt;
          {
              this.state.groups.map(function (group) {
                  return &lt;option key={group.id} value={group.id} selected={this.state.selectedGroupId == group.id}&gt;{group.name}&lt;/option&gt;
              }).bind(this)
          }
      &lt;/FormControl&gt;
  &lt;/FormGroup&gt;
  </code></pre>