[Bug]: react/no-unused-prop-types returns no errors when using the spread operator in JSX element #3566
Closed
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
When using the spread operator within a JSX component, the rule react/no-unused-prop-types
no longer detects any errors.
Demo Code
package.json
{
"scripts": {
"lint": "eslint Demo.tsx"
},
"private": true,
"devDependencies": {
"@types/react": "^18.2.0",
"@typescript-eslint/parser": "^5.59.1",
"eslint": "^8.39.0",
"eslint-plugin-react": "^7.32.2",
"typescript": "^5.0.4"
},
"dependencies": {
"react": "^18.2.0"
}
}
.eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
extends: ["plugin:react/recommended"],
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
settings: {
react: {
version: "detect"
}
},
rules: {
"react/no-unused-prop-types": 2
}
};
Demo.tsx
import React from "react";
type Props = {
foo: string;
bar: string; // <-- unused prop
};
const Demo: React.FC<Props> = ({ foo }) => {
return <div {...{}}>{foo}</div>;
};
export default Demo;
What is happening?
With spread operator
No error is detected when a prop type is unused within the component a spread operator is used in an element for attributes.
Without spread operator
When removing the spread operator, the unused prop is detected
Steps to reproduce
yarn lint
Expected Behavior
bar
should be marked as a linting error
eslint-plugin-react version
v7.32.2
eslint version
v8.39.0
node version
v18.11.0