reactjseslint

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

  • 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;