diff --git a/CHANGELOG.md b/CHANGELOG.md index 5b6207a2f6..f9f51a4e6d 100644 --- 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 index c68d0f8e95..ff65e367aa 100644 --- 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 index 56cbbf0ab0..95671b9a2f 100644 --- 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 index ea5c6cbd3a..b117901173 100644 --- 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
Hello {name}
+ } + } + } + ` + }, + { + code: ` + import React from 'react' + + type ComponentProps = { + name: string + } + + class Factory { + getComponent() { + return function Component({ name }: ComponentProps) { + return
Hello {name}
+ } + } + } + `, + parser: parsers['@TYPESCRIPT_ESLINT'] } ]) ),