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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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