Eslint-plugin-react: react/display-name false positive on ant-design ColumnsType

[gaara4896]

Tell us about your environment

• ESLint Version: 7.5.0
• ESLint Plugin React Version: 7.20.3
• Node Version: 10.15.3
• npm Version: 6.4.1

What parser (default, Babel-ESLint, etc.) are you using?

Please show your full configuration:

Configuration

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    // Prettier plugin and recommended rules
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {
    // Include .prettierrc.js rules
    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
    'react/prop-types': 'error',
    'react/react-in-jsx-scope': 'error',
    '@typescript-eslint/explicit-function-return-type': 'error',
    '@typescript-eslint/ban-ts-ignore': 'off',
    'jsx-a11y/label-has-associated-control': [
      'error',
      {
        labelComponents: [],
        labelAttributes: [],
        controlComponents: [],
        assert: 'either',
        depth: 25,
      },
    ],
    'jsx-a11y/anchor-is-valid': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'error',
    '@typescript-eslint/no-unused-vars': 'error',
  },

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

...
import { ColumnsType } from "antd/lib/table";
import { Table } from "antd";

const profilesColumns: ColumnsType<any> = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "URL",
    dataIndex: "url",
    key: "url",
    render: (url: string): React.ReactElement => (
      <a href={url} target="_blank" rel="noopener noreferrer">
        <p>lol</p>
      </a>
    )
  }
];

ReactDOM.render(
  <Table columns={profilesColumns} />,
  document.getElementById("root")
);

eslint --fix . --ext .ts,.tsx,.js,.jsx

What did you expect to happen?

For the Ant Design, render in ColumnsType is not a React component but function, hence the rule should not be applied in this scenario. No error should show up.

What actually happened? Please include the actual, raw output from ESLint.

yarn run v1.17.3
$ eslint --fix . --ext .ts,.tsx,.js,.jsx

/home/user/my-project/components/ComponentTable.tsx
  32:13  error  Component definition is missing display name  react/display-name

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[iiison]

Hey, @ljharb may I give this a shot if you don't mind...

[ljharb]

Go for it!

[iiison]

@gaara4896 I was going through the rule definition in the code. And it seems like a valid behavior. Even though profilesColumns[1].render is not a React component, but it returns a JSX fragment. And as I see in the code that rule would show an error in this case.

@ljharb Please let me know if I'm missing something here.

[iiison]

@gaara4896 | @ljharb Refer to this part of the test file for more details.

[jzabala]

@gaara4896 | @ljharb Refer to this part of the test file for more details.

I think the case you are referring is different. It is pretty common in React to directly export a component (what is happening in the tests), but here render is a render prop and shouldn't be detected as a component.

[iiison]

@ljharb | @jzabala created this PR for this. Please let me know if that works.