CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
zmii
zmii

Reputation: 4277

Specify default value to FormControl of react-bootstrap

In [email protected] 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 [email protected] ( 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'}

Upvotes: 18

Views: 65257

Answers (4)

Hossein Delara
Hossein Delara

Reputation: 31

This way you can set the default value.

                <option  >is any default</option>
                {

                    dataoption.map(item => {

                        return <option key={item.Value} value={item.Value} selected={defaultselect ? defaultselect == item.Value ? true : false : false}  >{item.Text}</option>
                    })
                }

            </FormControl>

You may receive an error in the console:

Warning: Use the defaultValue or value props on instead of setting selected on .

But setting defaultValue or value does not solve your problem

Upvotes: 3

Krister Berntsen
Krister Berntsen

Reputation: 173

(Hi googlers!)

If you are attempting to load an array of options into the Form-Control (By a network-call, promise or other async function) make sure you dont render the Select-field until the options-array has been fully loaded. Or else the defaultValue wont work.

(True for react-bootstrap 1.0.0-beta.8. Your mileage may wary.)

Upvotes: 4

Brent Washburne
Brent Washburne

Reputation: 13158

With "react-bootstrap": "1.0.0-beta.14", the value prop is used:

<Form.Control as="select" value={user}>
    { users.map(opt => (<option>{ opt }</option>)) }
</Form.Control>

Upvotes: 7

Yangshun Tay
Yangshun Tay

Reputation: 53169

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>

Upvotes: 25

Related Questions