Component name as prop

Feature Request

Component name as props

Current behavior

You have to set .displayName in a second statement

const MyComponent = (props) => <Stuff />;

MyComponent.displayName = 'HeyHey'

https://stackoverflow.com/questions/43356073/how-to-set-displayname-in-a-functional-component-react

Desired behavior

You can set a component’s displayName by setting a displayName prop, ideally anywhere in the component hierarchy, like so:

export default props => <Stuff displayName="MyStuff" />;

or so:

export default props => (
  <Fragment displayName="FragmentWithName">
    <Stuff displayName="HeyHey" />
  </Fragment>
);

Why

To make writing components less verbose

Other ideas: https://github.com/facebook/react-devtools/issues/1294

[gaearon]

You have to set .displayName in a second statement

You don’t “have to” do it. The question you referenced is about production builds. If you just need it in development, it’s enough to give names to your functions.

const Foo = () => ...

export default Foo

or

export default function Foo() {
  // ...
}

The only reason you have this problem is because you do export default props => .... That’s not a recommended pattern because none of your JS functions will appear properly even in regular JS stacktraces.

[revskill10]

I think let’s just keep default behavior, but allow overriding the displayName with props. Best of three worlds.