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-08 21:28:12Z

29

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 8, 2017 at 21:28

answered Aug 8, 2017 at 20:30

Adrien Lacroix

3,6121 gold badge22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Adrien Lacroix Over a year ago

@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 Over a year ago

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 Over a year ago

@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.

rjurney Over a year ago

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

jarmod Over a year ago

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.

Rastislav · Accepted Answer · 2019-04-23 11:46:32Z

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

Collectives™ on Stack Overflow

semantic ui react default selected options in dropdown

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related