From 37b4f8e51bb1ce2540a586e4ae6e526a2ed7c685 Mon Sep 17 00:00:00 2001
From: David Lechner <david@lechnology.com>
Date: Wed, 16 Mar 2022 10:52:57 -0500
Subject: [PATCH] [Fix] `propTypes`: add `VFC` to react generic param map

In d9531c3b, we missed adding VFC to genericTypeParamIndexWherePropsArePresent in addition to allowedGenericTypes.

This adds some failing tests and fixes the issue.

Fixes #3230
---
 CHANGELOG.md                  |  2 ++
 lib/util/propTypes.js         |  1 +
 tests/lib/rules/prop-types.js | 49 +++++++++++++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f8b6e7ac7..658879ba01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ### Fixed
 * [`hook-use-state`]: Allow UPPERCASE setState setter prefixes ([#3244][] @duncanbeevers)
+* `propTypes`: add `VFC` to react generic type param map ([#3230][] @dlech)
 
 [#3244]: https://github.com/yannickcr/eslint-plugin-react/pull/3244
+[#3230]: https://github.com/yannickcr/eslint-plugin-react/issues/3230
 
 ## [7.29.4] - 2022.03.13
 
diff --git a/lib/util/propTypes.js b/lib/util/propTypes.js
index a61a57d67b..61bac2147e 100644
--- a/lib/util/propTypes.js
+++ b/lib/util/propTypes.js
@@ -105,6 +105,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
     ForwardRefRenderFunction: 1,
     forwardRef: 1,
     VoidFunctionComponent: 0,
+    VFC: 0,
     PropsWithChildren: 0,
     SFC: 0,
     StatelessComponent: 0,
diff --git a/tests/lib/rules/prop-types.js b/tests/lib/rules/prop-types.js
index d44285ab0f..7682204820 100644
--- a/tests/lib/rules/prop-types.js
+++ b/tests/lib/rules/prop-types.js
@@ -3439,6 +3439,51 @@ ruleTester.run('prop-types', rule, {
       `,
       features: ['ts', 'no-babel'],
     },
+    {
+      code: `
+          import React, { VFC } from 'react'
+
+          interface Props {
+          age: number
+          }
+          const Hello: VFC<Props> = function Hello(props) {
+          const { age } = props;
+
+          return <div>Hello {age}</div>;
+          }
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+          import React from 'react'
+
+          interface Props {
+          age: number
+          }
+          const Hello: React.VFC<Props> = function Hello(props) {
+          const { age } = props;
+
+          return <div>Hello {age}</div>;
+          }
+      `,
+      features: ['ts', 'no-babel'],
+    },
+    {
+      code: `
+          import React from 'react'
+
+          export interface Props {
+          age: number
+          }
+          const Hello: React.VFC<Props> = function Hello(props) {
+          const { age } = props;
+
+          return <div>Hello {age}</div>;
+          }
+      `,
+      features: ['ts', 'no-babel'],
+    },
     {
       code: `
         import React, { ForwardRefRenderFunction  as X } from 'react'
@@ -3974,13 +4019,13 @@ ruleTester.run('prop-types', rule, {
         interface SomeType<ContextType = any> {
           renderValue: (context: ContextType) => React.ReactNode;
         }
-        
+
         interface DataObject {
           id: string,
           title: string,
           value: string,
         }
-        
+
         const someType: SomeType<DataObject> = {
           renderValue: ({title}) => <div>{title}</div>,
         };