semantic ui react default selected options in 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
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'));