mirror of
https://github.com/jbranchaud/til
synced 2026-01-02 22:58:01 +00:00
26 lines
924 B
Markdown
26 lines
924 B
Markdown
# Alter The Display Name Of A Component
|
|
|
|
Components adopt their display name from the class or function that renders
|
|
them. A component's display name becomes important to know about as soon as
|
|
you start digging through the [React
|
|
devtools](https://github.com/facebook/react-devtools) interface -- whether
|
|
debugging or just perusing the component hierarchy, the display names of
|
|
components is what you'll see. In most circumstances, the display name is
|
|
good enough as is. If you want or need to, you can change it.
|
|
|
|
```javascript
|
|
const Hello = ({ name }) => {
|
|
return (
|
|
<h1>{name}</h1>
|
|
);
|
|
};
|
|
Hello.displayName = "Hola";
|
|
```
|
|
|
|
By setting the `displayName` property on this component, you are able to
|
|
alter what name is used by React devtools.
|
|
|
|
This can be useful when bringing in a 3rd party library or
|
|
component that doesn't use a display name that you find helpful -- in
|
|
particular when using Higher Order Components.
|