Component definition is missing display name react/display-name
How do I add a display name to this?
export default () =>
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>;
Solution 1:
Exporting an arrow function directly doesn't give the component a displayName
, but if you export a regular function the function name will be used as displayName
.
export default function MyComponent() {
return (
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>
);
}
You can also put the function in a variable, set the displayName
on the function manually, and then export it.
const MyComponent = () => (
<Switch>
<Route path="/login" exact component={LoginApp}/>
<Route path="/faq" exact component={FAQ}/>
<Route component={NotFound} />
</Switch>
);
MyComponent.displayName = 'MyComponent';
export default MyComponent;
Solution 2:
tldr: switch arrow function to a named function
Lint Error shown: Component definition is missing display name react/display-name
.
To resolve, you can name your function (IOW, do not use arrow function). In this example, I am using react-table
and passing a custom component to render in a cell.
No error:
{
Cell: function OrderItems({ row }) {
return (
<a>
View Items
</a>
);
},
}
Error:
{
Cell: ({ row }) => (
<a>
View Items
</a>
)
}
Solution 3:
A way to add displayName
property to anonymous component function without creating named function is to use recompose
:
import { compose, setDisplayName } from 'recompose';
export default compose(setDisplayName('SomeComponent'))(props => ...);
Or just:
export default Object.assign(props => ..., { displayName: 'SomeComponent' });