eslint-plugin-react
eslint-plugin-react copied to clipboard
[Bug]: prop-types, triggers on properties called `props` that are not component props
Is there an existing issue for this?
- [x] I have searched the existing issues and my issue is unique
- [x] My issue appears in the command-line and not only in the text editor
Description Overview
The prop-types rule appears to trigger on arbitrary arrow functions inside the lexical scope of a function component, which access any variable named props even if that variable is declared as a parameter of said arrow functions, even if the component itself doesn't even bind the props name and the arrow function thus is not shadowing it.
export const EpisodeTabNavBar: FC<EpisodeTabNavBarProps> = ({ episodeId }) => {
const { data: episode } = useGetEpisodeQuery({
"Accept-Language": locale,
episodeId: episodeId
}, {
selectFromResult: props => props.isError // <-- lints error: 'isError' is missing in props validation
? { ...props, data: undefined }
: props
});
// ...
});
Renaming props to something else, does not error. E.g.
export const EpisodeTabNavBar: FC<EpisodeTabNavBarProps> = ({ episodeId }) => {
const { data: episode } = useGetEpisodeQuery({
"Accept-Language": locale,
episodeId: episodeId
}, {
selectFromResult: result => result.isError // <-- no lint error
? { ...result, data: undefined }
: result
});
// ...
});
Expected Behavior
The prop-types rule should not trigger a lint error on this case. The props variable in question has nothing to do with component props.
eslint-plugin-react version
v7.37.2
eslint version
v8.57.1
node version
v20.12.2