[Fix] display-name: Get rid of false position on component detection

Fixes #2751. Closes #2758.

Author: iiison

CHANGELOG.md

@@ -8,7 +8,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Added
 * add [`no-namespace`] rule ([#2640] @yacinehmito @ljharb)
 
+### Fixed
+* [`display-name`]: Get rid of false position on component detection ([#2759] @iiison)
+
 [#2640]: https://github.com/yannickcr/eslint-plugin-react/pull/2640
+[#2759]: https://github.com/yannickcr/eslint-plugin-react/pull/2759
 
 ## [7.25.3] - 2021.09.19
 

lib/rules/display-name.js

@@ -101,7 +101,7 @@ module.exports = {
       const namedFunctionExpression = (
         astUtil.isFunctionLikeExpression(node)
         && node.parent
-        && (node.parent.type === 'VariableDeclarator' || node.parent.method === true)
+        && (node.parent.type === 'VariableDeclarator' || node.parent.type === 'Property' || node.parent.method === true)
         && (!node.parent.parent || !utils.isES5Component(node.parent.parent))
       );
 
@@ -161,6 +161,7 @@ module.exports = {
         if (ignoreTranspilerName || !hasTranspilerName(node)) {
           return;
         }
+
         if (components.get(node)) {
           markDisplayNameAsDeclared(node);
         }

tests/lib/rules/display-name.js

@@ -504,6 +504,26 @@ ruleTester.run('display-name', rule, {
       class Link extends Component<LinkProps> {}
     `,
     parser: parsers.BABEL_ESLINT
+  }, {
+    code: `
+      const x = {
+        title: "URL",
+        dataIndex: "url",
+        key: "url",
+        render: url => (
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            <p>lol</p>
+          </a>
+        )
+      }
+    `,
+    parser: parsers.BABEL_ESLINT
+  }, {
+    code: `
+      const renderer = a => function Component(listItem) {
+        return <div>{a} {listItem}</div>;
+      };
+    `
   }],
 
   invalid: [{
@@ -921,5 +941,12 @@ ruleTester.run('display-name', rule, {
       endLine: 11,
       endColumn: 11
     }]
+  }, {
+    code: `
+      const renderer = a => listItem => (
+        <div>{a} {listItem}</div>
+      );
+    `,
+    errors: [{message: 'Component definition is missing display name'}]
   }]
 });