From 210865e9a74eb04ff339d85957df8f28531f78da Mon Sep 17 00:00:00 2001
From: vedadeepta <pal.veda.deepta@gmail.com>
Date: Fri, 1 Oct 2021 22:00:22 +0530
Subject: [PATCH] [Fix] `propTypes`: add `VoidFunctionComponent` to react
 generic list

---
 CHANGELOG.md                  |  4 ++
 lib/util/propTypes.js         |  2 +-
 tests/lib/rules/prop-types.js | 72 +++++++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dc66106ce7..1e467dc470 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`no-unused-class-component-methods`]: Handle unused class component methods ([#2166][] @jakeleventhal @pawelnvk)
 * add [`no-arrow-function-lifecycle`] ([#1980][] @ngtan)
 
+### Fixed
+* [`propTypes`]: add `VoidFunctionComponent` to react generic list ([#3092][] @vedadeepta)
+
+[#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
 [#2166]: https://github.com/yannickcr/eslint-plugin-react/pull/2166
 [#1980]: https://github.com/yannickcr/eslint-plugin-react/pull/1980
 
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
index b9e397deb7..cf355150a6 100644
--- a/lib/util/propTypes.js
+++ b/lib/util/propTypes.js
@@ -100,7 +100,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
   const defaults = {customValidators: []};
   const configuration = Object.assign({}, defaults, context.options[0] || {});
   const customValidators = configuration.customValidators;
-  const allowedGenericTypes = new Set(['PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
+  const allowedGenericTypes = new Set(['VoidFunctionComponent', 'PropsWithChildren', 'SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
   const genericReactTypesImport = new Set();
 
   /**
diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
index b23e95eecd..f369b36d0f 100644
--- a/tests/lib/rules/prop-types.js
+++ b/tests/lib/rules/prop-types.js
@@ -3317,6 +3317,36 @@ ruleTester.run('prop-types', rule, {
           };
         `,
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React, { VoidFunctionComponent } from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: VoidFunctionComponent<Props> = function Hello(props) {
+            const { age } = props;
+
+            return <div>Hello {age}</div>;
+           }
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: React.VoidFunctionComponent<Props> = function Hello(props) {
+            const { age } = props;
+
+            return <div>Hello {age}</div>;
+           }
+        `,
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ]),
     {
@@ -6896,6 +6926,48 @@ ruleTester.run('prop-types', rule, {
           }
         ],
         parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React, { VoidFunctionComponent } from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: VoidFunctionComponent<Props> = function Hello(props) {
+            const { test } = props;
+
+            return <div>Hello {name}</div>;
+           }
+        `,
+        errors: [
+          {
+            messageId: 'missingPropType',
+            data: {name: 'test'}
+          }
+        ],
+        parser: parsers['@TYPESCRIPT_ESLINT']
+      },
+      {
+        code: `
+           import React from 'react'
+
+           interface Props {
+            age: number
+           }
+           const Hello: React.VoidFunctionComponent<Props> = function Hello(props) {
+            const { test } = props;
+
+            return <div>Hello {name}</div>;
+           }
+        `,
+        errors: [
+          {
+            messageId: 'missingPropType',
+            data: {name: 'test'}
+          }
+        ],
+        parser: parsers['@TYPESCRIPT_ESLINT']
       }
     ])
   )