The React Developer Tools is awesome part of React.js developer experience when digging into unknown code bases — or your own after a while.
But sometimes it just fails and displays your component names as <Unknown>. Why? Let’s go through the different components types to see how the name is set on them and let’s examine why sometimes it’s not there. Finally we’ll see what can be done about it.
I’m assuming EcmaScript spec 2015 or later here.
Function Declarations
function MyFun(){return <div>function component</div>;}
JavaScript has a simple reflection API for function names
MyFun.name === “MyFun”
Classes
class MyClass extends React.Component {render() {return <div>class component</div>;}}
As you might know JavaScript classes are just syntax for the prototypal inheritance which means that classes are just functions. So the function reflection API works here too
MyClass.name === “Myclass”
Arrow Function Expressions
const ArrowFn = () => (<div>arrow fn</div>);
This works as expected too. The name is inferred from the variable declaration by the JavaScript engine
ArrowFn.name === “ArrowFn”
React.createClass()
var OldClass = React.createClass({render() {return <div>old class</div>}});
In this case there is nothing JavaScript engines can do. Luckily the babel-plugin-transform-react-display-name of the Babel React preset steps in here and transpiles the variable name into a displayName property of the component
var OldClass = React.createClass({displayName: “OldClass”,...});
Failures
When you generate components dynamically like
const simple = (Component, styles) => (props => <Component {...props} style={styles} />;);
const Button = simple("b", {padding: 20,});
Button.name and Button.displayName will be empty because in this case the name cannot be inferred by the JavaScript engine or the Babel plugin. They don’t know that the simple() function returns a React component.
Custom names
To help out this situation you can set the displayName property manually. On function components the devtools will prefer the name on the displayName property over the name property if both are set.
const simple = (Component, styles) => {const Wrapped = props => <Component {...props} style={styles} />;Wrapped.displayName = `simple(${getName(Component)})`;return Wrapped;};
But this way you can get at best names like
Inspired by the display name transform plugin I created an additional display name Babel plugin:
babel-plugin-display-name-custom
With it you can configure which functions in your project create new React components and have the display names automatically inferred for them.
It would transpile the above example to
const Button = simple("div", {padding: 20,});Button.displayName = "Button";
Checkout the Github page for more information
https://github.com/epeli/babel-plugin-display-name-custom
P.S.
If you like the above API style of the simple() example — checkout react-simple on Github for a production implementation of it for the web and React Native. The Babel plugin was initially created as part of it.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!