jsx-eslint/eslint-plugin-react

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

Open

#3159 opened on Dec 15, 2021

View on GitHub
 (2 comments) (4 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
help wantedtypescript

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

Tech stack
javascripttypescriptreact
Domain
toolingdeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint plugin development basicsReact prop types ruleTypeScript type extension patterns
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the prop types rule source in `lib/rules/prop types.js`. Understand how it currently extracts prop types from type annotations. The false positive occurs when the component type is an extension of FC (e.g., FC<Props> & { Block: typeof Block }). Look at the rule's handling of intersection types. Review any existing tests for similar patterns. Consider adding a test case with the provided code and adjusting the rule logic to correctly handle extended component interfaces.