[Fix] prop-types: function in class that returns a component causes…

… false warning in typescript Fixes #2784.
jsx-eslint · Oct 25, 2020 · 5f6350a · 5f6350a
1 parent 57d0df7
commit 5f6350a
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,7 +12,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ### Fixed
 * [`display-name`]/component detection: avoid a crash on anonymous components ([#2840][] @ljharb)
+* [`prop-types`]: function in class that returns a component causes false warning in typescript ([#2843][] @SyMind)
 
+[#2843]: https://github.com/yannickcr/eslint-plugin-react/pull/2843
 [#2840]: https://github.com/yannickcr/eslint-plugin-react/issues/2840
 [#2835]: https://github.com/yannickcr/eslint-plugin-react/pull/2835
 [#2763]: https://github.com/yannickcr/eslint-plugin-react/pull/2763

diff --git a/lib/util/Components.js b/lib/util/Components.js
@@ -707,7 +707,10 @@ function componentRule(rule, context) {
           return undefined;
         }
         if (utils.isInAllowedPositionForComponent(node) && utils.isReturningJSXOrNull(node)) {
-          return node;
+          if (!node.id || isFirstLetterCapitalized(node.id.name)) {
+            return node;
+          }
+          return undefined;
         }
 
         // Case like `React.memo(() => <></>)` or `React.forwardRef(...)`

diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
@@ -891,7 +891,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
       return;
     }
 
-    if (isInsideClassBody(node)) {
+    // https://github.com/yannickcr/eslint-plugin-react/issues/2784
+    if (isInsideClassBody(node) && !astUtil.isFunction(node)) {
       return;
     }
 

diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
@@ -3143,6 +3143,37 @@ ruleTester.run('prop-types', rule, {
         }
         export default InputField`,
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+          import React from 'react'
+
+          class Factory {
+            getRenderFunction() {
+              return function renderFunction({ name }) {
+                return <div>Hello {name}</div>
+              }
+            }
+          }
+        `
+      },
+      {
+        code: `
+          import React from 'react'
+
+          type ComponentProps = {
+            name: string
+          }
+
+          class Factory {
+            getComponent() {
+              return function Component({ name }: ComponentProps) {
+                return <div>Hello {name}</div>
+              }
+            }
+          }
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ])
   ),