Semantic-UI-React, selection, multi, can't set defaultValue

Question

I have React component:

<Dropdown
    placeholder={field[propName].label}
    id={propName}
    fluid
    multiple
    selection
    search
    defaultValue={defaultOptions}
    options={options}
/>

So options and defaultOptions is the same structure arrays {text: 'string, value: 'string'}.

In semantic UI source code I found this:

/** Initial value or value array if multiple. */
    defaultValue: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.arrayOf(PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
      ])),
    ])

That the reason why my code above gives me error:

`Warning: Failed propType: Invalid prop `defaultValue` supplied to `Dropdown`. Check the render method of `View`.`

So question is how then I should set defaultValue for multi selection type of Dropdown?

Craig1123 · Accepted Answer · 2016-11-07T19:43:27.987

6

defaultValue cannot be an object for semantic-UI-react. It can only be a value. http://react.semantic-ui.com/modules/dropdown. If you look at the props of defaultValue, the docs say that it can be a string, number, or arrayOf.

I usually set mine to value of the dropdown - using immutabilityJS - when it is switched onChange.

<Dropdown
    placeholder={field[propName].label}
    id={propName}
    fluid
    multiple
    selection
    search
    defaultValue={dropdownList.get('forWhat')}
    options={options}
    onChange={(e, {value}) => this.updateDropdownList('forWhat',[value:value, text:"works"])}
/>

edited Nov 07 '16 at 19:43

answered Nov 07 '16 at 19:35

Craig1123

1,080
13
23

I'm trying to pass array of string with value, same value I use in {text: '', value: ''}, object, and it still doesn't work – Sarkis Arutiunian Nov 07 '16 at 19:38
I just tried my code with [value:value, text:'works'] and that does work. Can you post more of your code. Maybe it is something else – Craig1123 Nov 07 '16 at 19:44
*[{value:value, text:'works}] - forgot to add the {} – Craig1123 Nov 07 '16 at 19:44
that array as options right? so lets assume we have 3 object in that array, value is JSON.stringified object. So what would you set as defaultValue? Just array of values? – Sarkis Arutiunian Nov 07 '16 at 19:47
1

oh wait, I'm now getting that same error. It appears that you can't do an array of objects or JSON.stringified object in semantic-ui-react. Sorry for the confusion. You can however do [value, "string", 100]. But objects are invalid. If you'd like to see that feature, post it on https://github.com/Semantic-Org/Semantic-UI-React/issues as an issue – Craig1123 Nov 07 '16 at 19:52
1

That's not good, why can I use string but can't JSON. stringified object) But thanks! – Sarkis Arutiunian Nov 07 '16 at 19:57

Semantic-UI-React, selection, multi, can't set defaultValue

1 Answers1

Linked