Carbon: [Dropdown] React warning: Cannot update a component while rendering a different component (`Dropdown`)

[s-onuma]

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

When I call setState in a dropdown's _onChange_, the following warning message appears in the console.

Warning: Cannot update a component (`MyForm`) while rendering a different component (`Dropdown`). To locate the bad setState() call inside `Dropdown`, follow the stack trace as described in https://fb.me/setstate-in-render

Is this issue related to a specific component?

Dropdown

What did you expect to happen? What happened instead? What would you like to
see changed?

It's implemented appropriately and no warning message appears.

What browser are you working in?

Google Chrome (Version 83.0.4103.116)

What version of the Carbon Design System are you using?

carbon-components-react v7.15.0

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

None

Steps to reproduce the issue

1. Select an item in a dropdown that changes the parent state in _onChange_
   (See the CodeSandbox attached below)
2. The warning message appears in the console

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

CodeSandbox available:
https://codesandbox.io/s/adoring-morning-e0lt1?fontsize=14&hidenavigation=1&theme=dark

Additional information

• Screenshots or code
• Notes

[bavibm]

I'm having the same issue. Before I attempted to do this with hooks I was using a Class-based component and got a very similar error message just worded differently:

Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and stat

I switched to a function based component with hooks and got the error described in this post.

If we cannot update state when we select an item in a Dropdown, what is even the intended use of this component? Is there some kind of un-controlled use I'm missing?

[joshblack]

Hey there! 👋 Was digging into this, and it seems like a side-effect of upgrading downshift. Seems like there is a specific issue that they updated in a newer version of the library so I'll go and update this dependency which should fix this problem. Just wanted to give you all a heads up!