How to set defaultValue for multi select?

Question

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?

Katinakatine

Welcome to StackOverflow, I would recommend you to read this guide for Minimal, Complete, and Verifiable example and show us what you have already tried to resolve your problem. – Malachy

Answer 1

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.

Malachy

Answer 2

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
/>

Discompose

Answer 3

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.

Quadratics

Answer 4

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}
/>
): ""}

Dodiedodo

Answer 5

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.

Woolsack

Answer 6

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

              

Amyotonia