Semantic-ui-react: Dropdown: Receive Warning even requested props are given

[volaka]

Steps to Reproduce

1. Copied "Search Selection" from react semantic-ui website
2. Gathered options from database in requested format.

<Dropdown
  onChange={this.setValue.bind(this)}
  search
  selection
  options={this.state.worldOptions}
  value={value}
  placeholder="World"
/>

Expected
The Dropdown shouldn't give any warnings.
Result
Dropdown works fine. Can do a search and select an option.
But it logs in console:
Warning: Failed prop type: selection prop in Dropdown requires props: options.

Testcase
If the docs show the issue, use: https://react.semantic-ui.com/modules/dropdown#dropdown-example-search-selection-two

[ghost]

Same problem

[layershifter]

I can't reproduce this with latest version, please provide versions of React and SUIR. Also, please make a codepen that illustrates an issue, but keep in mind that you will don't recieve warnings there because we're using there production versions.

[volaka]

Versions are:
"react": "^15.6.1",
"semantic-ui-react": "^0.71.1"

Weird, neither I can reproduce the error now. @jecacs do you still have the same warning?

I know we don't receive warnings when we use production version but that doesn't mean there are no warnings in the system, that's why we work on dev servers, to resolve warns and errs.
@layershifter Thank you for fast reply though, if I receive the same warn again, I will post again with more details, codepen and ss'.

[volaka]

I found the problem. I was making async request in my componentWillMount lifecycle method. I was updating the state, and then using that state variable in my dropdown list.

The problem was produced because dropdown was rendered first with empty options before axios async request was done. But I was seeing the options anyway because axios returned a response and it was done so fast. So the warning was given for the first render in which the options variable was empty.

[g-wozniak]

@volaka: I confirm it's the same in my case, but how to prevent it, any idea? When I set selection='' or anything similar it still throws an error. What is the default value for this property when options are empty?

[volaka]

@gregiolo I am using redux, now worldOptions is an empty array default in my reducer . when async call finishes, worldOptions becomes [{key:'...', value:'...', text:'...'}, ...]. I never touch selection property.

<Dropdown
  selection
  options={worldOptions}
  ...
/>

so when it renders worldOptions before async call, it renders an empty array, that means empty dropdown. I hope it helps.

[brianespinosa]

@gregiolo if you want to know what the default prop and type for any prop on a SUIR component is, take a look at the docs at the top of the page for the component you are working with. If it has a default, it's defined in the Default column. https://react.semantic-ui.com/modules/dropdown

[SandroMiguel]

My easy way was doing like this
options={someOptions || []}