React-Bootstrap set value of FormControl Select

Question

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.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl componentClass="select" placeholder="Group"
                 inputRef={ref => { this.groupSelect = ref; }}
                 onChange={this.groupSelect}>
        <option></option>
        {
            this.state.groups.map(function (group) {
              return <option key={group.id} value={group.id}>{group.name}</option>
            })
        }
    </FormControl>
</FormGroup>

I've tried to access the component this way but it comes up undefined.

console.debug(this.groupSelect);
this.groupSelect.value(1);

UPDATE:

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.

<FormGroup controlId="group">
    <ControlLabel>Group</ControlLabel>
    <FormControl componentClass="select" placeholder="Group"
                 inputRef={(ref) => { this.state.groupSelect = ref }}
                 onChange={this.groupSelect}>
        <option></option>
        {
            this.state.groups.map(function (group) {
                return <option key={group.id} value={group.id} selected={this.state.selectedGroupId == group.id}>{group.name}</option>
            }).bind(this)
        }
    </FormControl>
</FormGroup>

Answer 1

You are missing a crucial piece here, which is you need to set the value of the component. Add:

value={this.state.groupSelectValue || defaultValue}

Where groupSelectValue is the value from the record you're editing, and the defaultValue is what you want to default to if there is no record or no value in the record.

Then, in the onChange event function (groupSelect(e)), you will do:

this.setState({
 groupSelectValue: e.target.value
});

So that the state is updated with the selection.