Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: react/boolean-prop-naming not working with component wrapper functions #3844

Open
2 tasks done
Afgan0r opened this issue Oct 28, 2024 · 0 comments
Open
2 tasks done
Labels

Comments

@Afgan0r
Copy link

Afgan0r commented Oct 28, 2024

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 rule doesn't work if the component is wrapped by a function, such as memo:

type Props = {
  // eslint error
  isVisible: boolean;
}

const Comp = (props: Props) => (
  <div />
)
type Props = {
  // no error
  isVisible: boolean;
}

const Comp = memo(
  (props: Props) => (
    <div />
  )
)

I need to use wrapper functions in this way because I'm also using the missing-observer rule from eslint-plugin-mobx, which works only if the component itself is wrapped. If observer is added to export like this export default observer(Comp), then missing-observer rule doesn't work as expected and still gives an error

Also, the rule doesn't work if the component is wrapper by memo, forwardRef etc. So this problem persists not only when using observer

Rule configuration:

'react/boolean-prop-naming': [
  2,
  {
    propTypeNames: ['boolean'],
    rule: '^(?!is|has)[a-z]([A-Za-z0-9]?)+',
    message: 'Do not use prefix "is" or "has" for boolean props',
    validateNested: true,
  },
],

React configuration in eslint.config.ts:

import reactPlugin from 'eslint-plugin-react';

[
  {
    languageOptions: reactPlugin.configs.flat['jsx-runtime'].languageOptions,
    settings: {
      react: {
        version: 'detect',
        componentWrapperFunctions: ['observer']
      }
    }
  },
]

Expected Behavior

This code should give a eslint error

type Props = {
  isVisible: boolean;
}

const Comp = memo(
  (props: Props) => (
    <div />
  )
)

eslint-plugin-react version

v7.37.1

eslint version

v9.13.0

node version

v20.11.0

@Afgan0r Afgan0r added the bug label Oct 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

1 participant