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
?
By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.
The select component allows users to choose one option from a list. It is used in forms for users to submit data.
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
Works for single selections as well:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Form, Button } from 'semantic-ui-react';
import './style.css';
class App extends Component {
componentWillMount() {
this.setState({
options: [
{value:'1', text:'Lamborghini Aventador 2016'},
{value:'2', text:'VW Beetle 1971'},
{value:'3', text:'Ford Mustang'},
],
selected: '1',
});
}
render() {
return (
<div>
<Form onSubmit={this.handleFormSubmit}>
<Form.Dropdown
placeholder="Select Options"
defaultValue={this.state.selected}
fluid selection
options={this.state.options}
/>
<Button type="submit">Submit</Button>
</Form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With