The is awesome part of React.js developer experience when digging into unknown code bases — or your own after a while. React Developer Tools But sometimes it just fails and displays your component names as . 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. <Unknown> I’m assuming EcmaScript spec 2015 or later here. Function Declarations function MyFun(){return <div>function component</div>;} has a simple reflection API for function names JavaScript 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 of the Babel React preset steps in here and transpiles the variable name into a property of the component babel-plugin-transform-react-display-name displayName 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,}); and 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 function returns a component. Button.name Button.displayName simple() React Custom names To help out this situation you can set the property manually. On function components the devtools will prefer the name on the property over the property if both are set. displayName displayName name const simple = (Component, styles) => {const Wrapped = props => <Component {...props} style={styles} />; = `simple(${getName(Component)})`;return Wrapped;}; Wrapped.displayName 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 example — checkout on Github for a production implementation of it for the web and React Native. The Babel plugin was initially created as part of it. simple() react-simple is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Improving component names in React Developer Tools

Too Long; Didn't Read

Company Mentioned

Esa-Matti Suuronen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Improving component names in React Developer Tools

Too Long; Didn't Read

Company Mentioned

Esa-Matti Suuronen

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES