[Fix] propTypes: add VFC to react generic param map

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

This adds some failing tests and fixes the issue.

Fixes #3230

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
 

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,

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>,
         };