question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select component in React.StrictMode, component is throwing errors

See original GitHub issue

When we use the Select component in React strict mode then we could see the following errors: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Ref which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node.

Expected Behavior

-The component should render without any console errors.

Actual Behavior

  • Getting error: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Ref which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node.

URL, screen shot, or Codepen exhibiting the issue

image

Code sandbox: https://codesandbox.io/s/objective-glitter-0dzqt?file=/src/App.tsx

Steps to Reproduce

  1. Click on the Select box.
  2. See the console errors

Your Environment

  1. Windows and browser is Chrome.
  • Grommet version:
  • Browser Name and version:
  • Operating System and version (desktop or mobile):

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
Yorubacommented, May 27, 2020

Same error with List

3reactions
IanKBovardcommented, Apr 22, 2020

@kkgowtamasa Taking a look at this issue now

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error Boundaries
A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .
Read more >
Using strict mode in React 18: A guide to its new behaviors
Using strict mode in React 18: A guide to its new behaviors · The example above would throw an error since · You...
Read more >
What is StrictMode in React?
It's used for highlighting possible problems. Since it's a developer tool, it runs only in development mode. It renders every component ...
Read more >
React Components rendered twice — any way to fix this?
The reason why this happens is an intentional feature of the React.StrictMode . It only happens in development mode and should help to...
Read more >
How To Customize React Components with Props
PropTypes are a simple type system to check that data matches the expected types during runtime. They serve as both documentation and an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found