Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

semantic ui react default selected options in dropdown

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?

like image 372
user2456977 Avatar asked Aug 08 '17 19:08

user2456977


People also ask

How reset dropdown selected value in react?

By clicking on the clear icon which is shown in DropDownList element, you can clear the selected item in DropDownList through interaction. By using showClearButton property, you can enable the clear icon in DropDownList element.

Which UI component allows used to select an item from dropdown menu?

The select component allows users to choose one option from a list. It is used in forms for users to submit data.


2 Answers

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

like image 128
Adrien Lacroix Avatar answered Sep 28 '22 17:09

Adrien Lacroix


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'));
like image 45
Rastislav Avatar answered Sep 28 '22 17:09

Rastislav