CODEWITHSUNDEEP
react-select
SamJust
SamJust

Reputation: 111

How to set defaultValue for multi select?

So, I need to pass defaultValue to a react-select component with enabled multi select. I've tried everything I could think of: array of strings, array of objects, string, etc... Nothing seems to work.

I'm also using the getOptionLabel and getOptionValue, might they be the cause for all this mess?

Upvotes: 11

Views: 25125

Answers (6)

Boy Suro
Boy Suro

Reputation: 1

In my case, I use default HTML select element, I only use the following simple method & works:

<select name='select_name' multiple value={defaultValue} >

The defaultValue only consists the value of the selected items (simple 1 dimension array):

var defaultValue = ['1', '3', '4', '5', '9', '10'];

Upvotes: 0

Rutuja Dhokchaule
Rutuja Dhokchaule

Reputation: 106

defaultValue accepts an object or array of objects. here an object can be like this :

defaultValue = {{ value: 0, label: "John" }}

This is also one way:

defaultValue = { array1[0] }

If you want array of objects for multiple options (isMulti) you can do this:

defaultValue = { array1.map(ele => ele) }

Where array1 is an array of objects.

array1 = [
    { label: "John", value: 0 },
    { label: "Indiana", value: 1 },
    { label: "Stark", value: 2 },
];

This solution worked for me. I hope this helps you too.

Upvotes: 2

Nicholas Mberev
Nicholas Mberev

Reputation: 1841

According to React documentation, you can do this:

    <select multiple={true} value={['B', 'C']}>

Where B, C are the default value you want to have selected.

Upvotes: 0

Dan
Dan

Reputation: 180

You can set defaultValue without index

<Select
  defaultValue={existingItems}
  onChange={(option) => onChangeSelect(option)}
  closeMenuOnSelect={false}
  components={animatedComponents}
  isMulti={true}
  options={options}
/>

But for this to work you need await loading items from defaultValue if you loading from server For Example my full code

{!kindsByRestaraunt.loading ? (
  <Select
  defaultValue={existingItems}
  onChange={(option) => onChangeSelect(option)}
  closeMenuOnSelect={false}
  components={animatedComponents}
  isMulti={true}
  options={options}
/>
): ""}

Upvotes: 0

Tron
Tron

Reputation: 636

There is an alternate way to use value as your defaultValue. In my case I have used "id" and "industry" instead of "label" and "value"

this.state = {
     interested_industries: [{id:"ANY", industry:"ANY"}]
}

And in Select component:-

<Select 
    name="interested_industries"
    options={industries}
    value={interested_industries}
    getOptionLabel={ x => x.id}
    getOptionValue={ x => x.industry}
    onChange={this.handleSelect}
    isMulti
/>

Upvotes: 4

Laura
Laura

Reputation: 8630

If you refer to react-select documentation, the way to set defaultValue to multiple value select:

<Select
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
/>

The structure of options is 

[ 
  {
      label: <string>,
      value: <string>,
    } 
]

Working example here.

Upvotes: 10

Related Questions