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.

Not working with `forwardRef` wrapped components

See original GitHub issue

https://github.com/storybooks/babel-plugin-react-docgen/blob/fa170793df1d9065ba4bd25238627a72e55fbcb6/src/index.js#L49

This seems to exit early when a component is generated in a forwardRef call:

const Component = React.forwardRef(() => {
  return <div>Hello</div>
});

And as such does not attach any docgen data. This seems to stem from actualNameHandler.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
danielduancommented, Mar 27, 2019

fixed in v3.0.0, will integrate into storybook.

1reaction
shilmancommented, Mar 27, 2019

any chance you can issue a PR for this? If so I can test and release an upgrade

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bug: React.forwardRef() wrapped component does not have ...
Automatically generating the name is not something React can really do, since (in many cases) showing "forwardRef" would be confusing.
Read more >
How do you wrap a forwardRef component with a HOC?
If you're returning a wrapped component, then you have to also forward its reference by using forwardRef() and setting the ref prop.
Read more >
Forwarding Refs - React
Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary...
Read more >
How to use React's forwardRef function - Felix Gerschau
Our task is to forward the ref that the Input component receives to the HTML input element. We do that by wrapping the...
Read more >
Connect | React Redux
If {forwardRef : true} has been passed to connect , adding a ref to the connected wrapper component will actually return the instance...
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