Search code examples
javascriptreactjsreact-bootstrap

Specify default value to FormControl of react-bootstrap


In react-bootstrap@0.24.5 I've used Input attribute defaultValue to specify start value selected in combobox

<Input type='select'
             ref='templateSelect'
             defaultValue={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</Input>

How this should be handled in react-bootstrap@0.30.7 ( newest one ) where Input was deprecated and new component that should be used here FormControl doesn't provide such attribute?

Should value be used instead?

<FormControl type='select'
             ref='templateSelect'
             value={this.state.templateId}
             onChange={this.handleTemplateChange}>
   {options}
</FormControl>

Or maybe something like this:

value={this.state.templateId || 'default value'}

Solution

  • I didn't test this, but from the React Bootstrap source code for FormControl it seems like using defaultValue prop should work:

    <FormControl type="select"
      ref="templateSelect"
      defaultValue={this.state.templateId}
      onChange={this.handleTemplateChange}>
       {options}
    </FormControl>
    

    If multi select defaultValue must be array:

    this.state = {
      templateId:['some value']
    }
    <FormControl 
      multiple
      type="select"
      ref="templateSelect"
      defaultValue={this.state.templateId}
      onChange={this.handleTemplateChange}>
       {options}
    </FormControl>