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?

Solution 1

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

Solution 2

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

Comments

[Adrien Lacroix]

@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

[user2456977]

Finally solved it -- I was setting all this data --- the options and selected --- in componentWillReceiveProps instead of the constructor or componentWillMount. Thanks so much

[Adrien Lacroix]

@user2456977 Glad to hear that :) to understand more your problem, you can have a look here: React doesn't call componentWillReceiveProps with initial props during mounting.

[Tom N Tech]

The problem is that this only works for 'multiple' Dropdowns. There seems to be no way to do this for non-multiple Dropdowns.

[jarmod]

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.