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

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

Repository metrics

Stars
 (8,630 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

Research direction
Investigate how the react/prop types rule processes extended component types and identify the cause of the false positive. Look at the rule implementation and test cases.
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.
2
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.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptReactESLint
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60