Sarkis Arutiunian Sarkis Arutiunian - 1 month ago 11
Javascript Question

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

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?

Answer

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