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?

Roustabout

Answer 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

Lepine

@Roustabout 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 – Lepine

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

@Roustabout 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. – Lepine

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

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. – Jerid

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

Sven