jsx-eslint/eslint-plugin-react

[Bug]: False positive for react/no-unused-prop-types and passthrough

Open

#3885 opened on Feb 11, 2025

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
bughelp wanted

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

The following code causes a false positive on react/no-unused-prop-types:

export type TestProp = {
    name: string;
};

const Component1: FC<TestProp> = ({ name }) => {
    return <div>{name}</div>;
};

const Component2: FC<{ Component: FC<TestProp>; props: TestProp }> = ({ Component, props }) => {
    return <Component name={props.name} />;
};

const Component3: FC<TestProp> = (props: TestProp) => {
    return <Component2 Component={Component1} props={props} />;
};

Error: 'name' PropType is defined but prop is never used.

The error goes away when commenting out Component3.

Expected Behavior

The code above should be accepted by the linter.

eslint-plugin-react version

v7.37.4

eslint version

v8.57.1

node version

v20.15.0

Contributor guide