React: displayName not supported in combination with forwardRef in "React Developer Tools"

[mcjazzyfunky]

The display names of components that are based on React.forwardRef are currently ignored in "React Developer Tools" (=> name is always "ForwardRef" ).
I think this is a bug.

Example:

Edit:
https://jsbin.com/nutetosaxu/edit?html,js,output

Preview:
https://jsbin.com/nutetosaxu

[bvaughn]

Check out the docs:
https://reactjs.org/docs/forwarding-refs.html#displaying-a-custom-name-in-devtools

The function you pass to React.forwardRef needs to be named, rather than the object returned by React.forwardRef:

const MyComponent = React.forwardRef(function nameThisThing(props, ref) {
  return "[MyComponent]";
});

Updated code: https://codesandbox.io/s/oqy4q045qy
Preview: https://oqy4q045qy.codesandbox.io/

[mcjazzyfunky]

Oooops, like always: It helps if you can read ;-)
Thanks a lot @bvaughn - I've overlooked that part in the documentation :-(

[bvaughn]

No worries. Looks like an easy mistake to make!