semantic ui react default selected options in dropdown

Question

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?

Adrien Lacroix · Accepted Answer · 2017-08-08T21:28:12.110

25

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

edited Aug 08 '17 at 21:28

answered Aug 08 '17 at 20:30

Adrien Lacroix

3,152
17
23

@user2456977 it works for me. I updated my answer to provide a live example where you can see my result. Can you copy an sample of your options data? I think you have a problem with the `value` key – Adrien Lacroix Aug 08 '17 at 21:27
Finally solved it -- I was setting all this data --- the options and selected --- in componentWillReceiveProps instead of the constructor or componentWillMount. Thanks so much – user2456977 Aug 09 '17 at 16:19
@user2456977 Glad to hear that :) to understand more your problem, you can have a look [here](https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops): `React doesn't call componentWillReceiveProps with initial props during mounting.` – Adrien Lacroix Aug 09 '17 at 17:07
2

The problem is that this only works for 'multiple' Dropdowns. There seems to be no way to do this for non-multiple Dropdowns. – rjurney Jul 21 '18 at 01:54
If you do this, beware that any state processing that would have happened in your `handleMultiChange` handler, e.g. to set state values that will later be used in an API call, will not happen because `handleMultiChange` is never called when you pre-set a default value. You may need to implement some state transition in this case, as if the user had selected the option from the dropdown. – jarmod Dec 01 '19 at 19:03

score 2 · Answer 2 · answered Apr 23 '19 at 11:46

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'));

semantic ui react default selected options in dropdown

2 Answers2