eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

[Bug]: prop-types, triggers on properties called `props` that are not component props

Open rjgotten opened this issue 10 months ago • 0 comments

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

rjgotten avatar Dec 05 '24 08:12 rjgotten