Component definition is missing display name react/display-name

Question

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

Solution 4

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

View more solutions

Comments

[CorayThan]

Alright, so another question ... why should I care about the displayName?

[Tholle]

@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 <Unknown />

[Mats]

Or if you want to filter components by type.

[dev_in_training]

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: () => <LoadingSpinner /> }); on the loading spinner. This is my component export default function LoadingSpinner() { return ( <div className="loading"> <SprkBox className="data-product-loader sprk-u-AbsoluteCenter"> <SprkIcon additionalClasses="loading sprk-c-Icon--xxl" iconName="update" /> </SprkBox> </div> ); }

[VimNing]

@Tholle: Great thanks for this info!