jsx-eslint/eslint-plugin-react

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

Open

#3,159 opened on Dec 15, 2021

 (2 comments) (4 reactions) (0 assignees)JavaScript (2,733 forks)batch import
help wantedtypescript

Repository metrics

Stars
 (9,293 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

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

Contributor guide