react/prop-types false positive “is missing in props validation” for extended component types

[flying-sheep]

I’m building a component with antd-style subcomponent access. I.e. I want to be able to do <Columns><Columns.Block/></Columns>.

I made two attempts, both of which complained about “… is missing in props validation” once I replaced a bare FC<…> with something else:

By extending FC<…>:

const Block: FC<…> = (…) => …

export interface ColumnProps { … }
export interface ColumnsComponent extends FC<ColumnsProps> {
  Block: typeof Block
}
const Columns: ColumnsComponent = (…) => …
Columns.Block = Block

and inline:

const Block: FC<…> = (…) => …

export interface ColumnProps { … }
const Columns: FC<ColumnsProps> & { Block: typeof Block } = (…) => …
Columns.Block = Block

[gwmccull]

I'm using Typescript and React Native with the React Native Navigation library, and I have a similar issue. I found the following workaround for their NavigationFunctionComponent which extends the React.FunctionComponent type. It adds the componentId to the component

import React from "react";
import { NavigationFunctionComponent } from "react-native-navigation";
import PropTypes from "prop-types";

import AccountConfirmation from "../../components/launch/AccountConfirmation";

interface Props {
  token: string;
}

const AccountConfirmationScreen: NavigationFunctionComponent<Props> = ({
  componentId,
  token,
}) => {
  return <AccountConfirmation token={token} />;
};

function generatePropTypes() {
  return {
    componentId: PropTypes.string.isRequired,
    ...PropTypes.any,
  };
}

AccountConfirmationScreen.propTypes = {
  ...generatePropTypes(),
};

I'll be moving that generatePropTypes into a utils file to be used in a bunch of places

edit:
This is a workaround and ideally a more permanent solution would be to extend the library to have full Typescript support

[PianoManDanDan]

This is still an issue in eslint-plugin-react@7.33.2 (using eslint@8.56.0 and node v18.17.0)

I have managed to work around it by creating a MyComponentRoot which has the root component's implementation, but then the exported definition exists as a separate object, e.g. (using the `Columns example above)

const Block: FC<…> = (…) => …

export interface ColumnsProps { … }
const ColumnsRoot: FC<ColumnsProps> = (…) => …

export const Columns = ColumnsRoot as typeof ColumnsRoot & {
    Block: typeof Block;
}