Why does my component show as Anonymous in React components dev tool

Question

I've read a few examples of this but couldn't find an answer that made sense. I have a React component tree which is showing some components with their component names but others as just Anonymous.

I can't understand why.

The components showing as Anonymous are declared as:

  export const AddUserButton: React.StatelessComponent<{
  title: string;
  test?: string;
  onClick(): void;
}> = ({ title, test, onClick }) => (
  <CommonUserButton
    title={title}
    test={test}
    onClick={onClick}
  />
);

A simple example and explanation would be good thanks.

Answer 1

Babel transpiles components slightly different based on how you declare them. You should have the correct displayName if you declare like this:

// NOTE: React.StatelessComponent<T> is deprecated!
const AddUserButton: React.FunctionComponent<{  
  title: string;
  test?: string;
  onClick(): void;
}> = ({ title, test, onClick }) => (
  <CommonUserButton
    title={title}
    test={test}
    onClick={onClick}
  />
);

export default AddUserButton;

You can also try to set the displayName yourself by doing AddUserButton.displayName = "AddUserButton"; .