Components with forwardRef fail when trying to get displayName

[atomicpages]

Repro the issue using the following component:

import React from 'react';

const Button = React.forwardRef(({ children, ...rest }, ref) => <button {...rest} ref={ref}>{children}</button>);

export default Button;

The correct way to get the display name is not through JSX magic, but rather from the static member on the object. With function components jsx.type.prototype is undefined.

[bahmutov]

Mind submitting a pull request with a test and demo and a fix, please?

…

Sent from my iPhone

On May 22, 2019, at 14:16, Dennis Thompson ***@***.***> wrote: Repro the issue using the following component: import React from 'react'; export default function Button({ children, ...rest }) { return <button {...rest}>{children}</button>; } Button.displayName = "Button"; The correct way to get the display name is not through JSX magic, but rather from the static member on the object. With function components jsx.type.prototype is undefined. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[atomicpages]

Already working on it :)

[atomicpages]

Turns out this is happening React.forwardRef is used. To handle this case I'm propose to use the same getDisplayName function used by react-devtools. This should make it more resilient