I want default selected options in my dropdown
. The code below works when I add selected options but does not render with default selected options:
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
/>
<Button type="submit">Submit</Button>
</Form>
);
}
I tried adding defaultSelectedLabel={this.state.selected}
.
this.state.selected
is an array of options whose selected value by default is true :
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
defaultSelectedLabel={this.state.selected}
/>
<Button type="submit">Submit</Button>
</Form>
);
}
but I get the following warning:
Warning: Failed prop type: Invalid prop defaultSelectedLabel supplied to Dropdown.
I did the same with defaultValue
prop but got the same error
How do I get default selected options in my dropdown
?
You were not far from result.
You can provide an array of values in the defaultValue
props as the docs said.
defaultValue {number|string|arrayOf} Initial value or value array if multiple.
Here an example:
class YourComponent extends Component {
componentWillMount() {
this.setState({
options: [
{value:'1', text:'A'},
{value:'2', text:'B'},
{value:'3', text:'C'},
],
selected: ['1', '2'], // <== Here, the values of selected options
});
}
...
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
fluid multiple selection
options={this.state.options}
onChange={this.handleMultiChange}
defaultValue={this.state.selected} // <== here the default values
/>
<Button type="submit">Submit</Button>
</Form>
);
}
}
EDIT : Here is a live example