Use filename as component name when exporting anonymous function as default

[sbussard]

When a component is exported via an anonymous function

//...
export default () => <SomeComponent />;

It shows up as <Unknown> in react-devtools.
But I've noticed that react-devtools is able to identify which file the component came from, so it would be helpful to somehow use the filename instead of "Unknown" so that engineers don't have to change their coding style to use the inspect feature to the fullest.

[jcousins-ynap]

This also occurs in Higher Order Components

const Hello = ({ children }) => (<span>Hello {children}</span>);
const withWorld = (Component) => () => (<Component> world</Component>);
const HelloWorld = withWorld(Hello);

which renders

<Unknown>
  <Hello>
    <span>Hello world</span>
  </Hello>
</Unknown>

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools

[jcousins-ynap]

Thanks for the update @bvaughn

[sbussard]

@bvaughn the new version doesn't seem to show file names at all. Is there a way to enable that? With the codebase I work on it's absolutely critical to my workflow to have that feature.

[bvaughn]

This little button logs info about the component (including the file name) to the console:

Related issue on the new repo: facebook/react#16497

[sbussard]

Awesome! Thanks