147

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>;
David
  • 3,488
  • 2
  • 21
  • 21
  • Possible duplicate of [how to set displayName in a functional component \[React\]](https://stackoverflow.com/questions/43356073/how-to-set-displayname-in-a-functional-component-react) – tungd Oct 25 '18 at 15:33
  • I also have this one, and here are it's lint errors. – David Oct 25 '18 at 22:29
  • Check here how to fix: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md – manojadams Mar 02 '23 at 10:07

6 Answers6

253

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;
Tholle
  • 108,070
  • 19
  • 198
  • 189
  • 72
    Alright, so another question ... why should I care about the `displayName`? – CorayThan Sep 23 '19 at 22:11
  • 27
    @CorayThan It is mainly used by the Developer Tools to give a name to the components you use. If a component doesn't have a `displayName` is will be shown as `` – Tholle Sep 24 '19 at 13:16
  • Or if you want to filter components by type. – Mats Jan 19 '21 at 13:37
  • 2
    I tried the solution and I am still getting the component definition is missing display name error. This is where I am getting the error: export default withAuthenticationRequired(DownloadCodeSamplesPage, { onRedirecting: () => }); on the loading spinner. This is my component export default function LoadingSpinner() { return (
    ); }     – dev_in_training Mar 23 '21 at 15:25
  • Can't infer the display name if I use `const`? Do I need to explicitly define it with `MyComponent.displayName = 'MyComponent';`? Seems redundant. Also, is there a need to make the display name unique across the whole app? Or we can use the same name in two files? – ADTC Aug 14 '23 at 09:26
51

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>
  )
}
DeBraid
  • 8,751
  • 5
  • 32
  • 43
16

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' });
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
3

Writing the follow line, before the "arrow function" it worked for me

> /* eslint-disable react/display-name */
Header: () => <strong>ID</strong>,

Look how work here: https://eslint.org/docs/latest/user-guide/configuring/rules

Z rf
  • 65
  • 3
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Francisco Maria Calisto Jul 06 '22 at 13:06
  • Be cautious about disabling rules. They are there to help you write correct code, so disabling them lets you become complacent and write incorrect code. You must be absolutely sure the "incorrect" code is the only code that works, and the "correct" code doesn't, before disabling the corresponding ESLint rule. – ADTC Aug 16 '23 at 16:15
1

Similarly if you have a functional component like:

export default function test(){
    

return (<div></div>

}

And make another component inside of that like a text box which updates a state inside of a functional component from using refs which makes sure the entire page does not re-render and only just that component you need to give it a display name. Or there will be build errors.

export default function test(){
    const stateForFunctionalComponent = useRef("");

    const seperateTextBoxState = React.forwardRef((props,ref) => {
    const [textBoxDocTitle, setTextBoxDocTitle] = useState("");
    
    useEffect(() => {
      ref.current = textBoxDocTitle;
    },[textBoxDocTitle])
  
    return <input 
      id="somethingUnique" 
      type="text" 
      required="required" 
      placeholder="Enter document name..." 
      onInput={(e) => setTextBoxDocTitle(e.target.value)}>
  </input>})

    //Line that matters!!!
    seperateTextBoxState.displayName = "seperateTextBoxState";
}

    return (<div><seperateTextBoxState ref={stateForFunctionalComponent}/></div>)
}
kpgabriel
  • 63
  • 6
1

if you are using eslint this may be because of don't providing the following code yourclassName.displayName="name"

john babu
  • 11
  • 1