Component name as prop

[sbussard]

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:
facebook/react-devtools#1294

[revskill10]

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

[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.

[sbussard]

FWIW I disagree with the stance "that's the way it should be". We have such advanced tooling that this should not be an issue either for react or for regular js stacktraces.

[sbussard]

It's just that you have to write the component name several times inside of a file and if you want to rename it then you have to rename it in a bunch of places, including where it gets imported, and as your codebase grows, it creates more and more work to make a simple change like renaming.

Or you have to use function syntax that you're not in love with, and if it's a default export then you'll probably name it the same thing as your file anyways. It just causes developers to have to spend more time naming things, which is one of the most difficult things in programming.

[sbussard]

https://martinfowler.com/bliki/TwoHardThings.html