Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown: Receive Warning even requested props are given #1874

Closed
volaka opened this issue Jul 18, 2017 · 8 comments
Closed

Dropdown: Receive Warning even requested props are given #1874

volaka opened this issue Jul 18, 2017 · 8 comments

Comments

@volaka
Copy link

volaka commented Jul 18, 2017

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
Copy link

ghost commented Jul 18, 2017

Same problem

@layershifter
Copy link
Member

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.

@layershifter layershifter changed the title fix(Dropdown): Receive Warning even requested props are given Dropdown: Receive Warning even requested props are given Jul 20, 2017
@volaka
Copy link
Author

volaka commented Jul 20, 2017

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 volaka closed this as completed Jul 20, 2017
@volaka
Copy link
Author

volaka commented Jul 23, 2017

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
Copy link

g-wozniak commented Apr 11, 2018

@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
Copy link
Author

volaka commented Apr 11, 2018

@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
Copy link
Member

@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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants