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' });