Eslint-plugin-react: disable-next-line doesn't work with react rules in JSX

[felixfbecker]

When using // eslint-disable-next-line react/jsx-no-bind inside JSX, the violation is not ignored as expected.

Ignoring a built-in rule, e.g. arrow-parens, works as expected (demo). I am only seeing this with react/ rules, like react/jsx-no-bind or react/forbid-dom-props.

To reproduce, lint the following code snippet with

import React from 'react'
const Comp1 = () => null
const Comp2 = () => (
    <Comp1
        key={1}
        // eslint-disable-next-line react/jsx-no-bind
        onChange={isVisible => onChangeVisibility(isVisible, i)}
    ></Comp1>
)

If you move the prop up to be the first prop, it works:

import React from 'react'
const Comp1 = () => null
const Comp2 = () => (
    <Comp1
        // eslint-disable-next-line react/jsx-no-bind
        onChange={isVisible => onChangeVisibility(isVisible, i)}
        key={1}
    ></Comp1>
)

Any other rule works too:

import React from 'react'
const Comp1 = () => null
const Comp2 = () => (
    <Comp1
        key={1}
        // eslint-disable-next-line arrow-parens
        onChange={isVisible => onChangeVisibility(isVisible, i)}
    ></Comp1>
)

[email protected]
[email protected]

[ljharb]

This seems like more of an issue for eslint itself, not for this plugin - how eslint parses JSX, and override commands, is entirely within eslint's purview.

[felixfbecker]

How come it only happens with react/ rules and not built-in rules?

[ljharb]

That's a fair question; it might depend on the rule and what precisely it's warning on. Can you provide an example of core rule jsx overrides that work how you expect?

[felixfbecker]

Yeah, arrow-parens for example. See the issue description for a playground link

[ljharb]

ah thanks, sorry i missed that.

It might be some difference in how arrow-parens reports a warning location, versus how eslint-plugin-react does. It seems worth looking into.

[golopot]

I cannot reproduce this bug.

[ljharb]

@felixfbecker can you provide npm ls | grep eslint output?

[felixfbecker]

Here ya go:

> yarn list | grep eslint
├─ @sourcegraph/[email protected]
│  ├─ @typescript-eslint/eslint-plugin@^1.13.0
│  ├─ @typescript-eslint/parser@^1.13.0
│  ├─ eslint-config-prettier@^6.0.0
│  ├─ eslint-plugin-ban@^1.2.0
│  ├─ eslint-plugin-etc@^0.0.1-beta.6
│  ├─ eslint-plugin-import@^2.18.2
│  ├─ eslint-plugin-jsdoc@^15.8.0
│  ├─ eslint-plugin-react-hooks@^1.6.1
│  └─ eslint-plugin-react@^7.14.3
├─ @types/[email protected]
├─ @typescript-eslint/[email protected]
│  ├─ @typescript-eslint/[email protected]
│  ├─ eslint-utils@^1.3.1
├─ @typescript-eslint/[email protected]
│  ├─ @typescript-eslint/[email protected]
│  └─ eslint-scope@^4.0.0
├─ @typescript-eslint/[email protected]
│  ├─ @types/eslint-visitor-keys@^1.0.0
│  ├─ @typescript-eslint/[email protected]
│  ├─ @typescript-eslint/[email protected]
│  └─ eslint-visitor-keys@^1.0.0
├─ @typescript-eslint/[email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  ├─ [email protected]
│  │  ├─ eslint-scope@^4.0.3
│  │  ├─ eslint-utils@^1.3.1
│  │  ├─ eslint-visitor-keys@^1.0.0
│  │  ├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ eslint-etc@^0.0.1
├─ [email protected]
│  ├─ eslint-import-resolver-node@^0.3.2
│  ├─ eslint-module-utils@^2.4.0
├─ [email protected]
├─ [email protected]
│  ├─ eslint@^3.7.1
│  ├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ eslint-visitor-keys@^1.0.0
├─ [email protected]
├─ [email protected]
│  ├─ eslint-scope@^5.0.0
│  ├─ [email protected]
│  ├─ eslint-utils@^1.4.2
│  ├─ eslint-visitor-keys@^1.1.0
│  │  └─ eslint-visitor-keys@^1.1.0
│  └─ eslint-visitor-keys@^1.0.0
│  ├─ eslint-scope@^4.0.3

Failure seen just now:

[cmrigney]

I'm having the same issue.

[ljharb]

@cmrigney in your case, you're ensuring that renderRow will be !== on successive renders, breaking any PureComponent-like optimizations in RenderOption.

[nazariydolfin]

I have got the same issue, too. /* eslint-disable */ for multi-line does not work either.

[gitjul]

this is a bit stale, but since it's not closed, and in case anyone else runs into this thread, have you tried surrounding the rule in brackets, e.g. { /* eslint-disable-next-line react/jsx-no-bind */ }?

could look like this:

<Comp1
  { /* eslint-disable-next-line react/jsx-no-bind */ }
  onChange={isVisible => onChangeVisibility(isVisible, i)}
  key={1}
></Comp1>

or this:

<Comp1
  onChange={isVisible => onChangeVisibility(isVisible, i)}   { /* eslint-disable-line react/jsx-no-bind */ }
  key={1}
></Comp1>

I just did something like that in a project after being stuck for a while and it worked.
found the solution here: https://github.com/eslint/eslint/issues/7030

[ManoharSomu]

Code:

const MenuItem = ({title, imageUrl, size}) => (
    <div className ={'${size}, menu-item'}>

      <div className='background-image'style={{backgroundImage: 'url(${imageUrl})'}}>

        </div>
    <div className='content'>
        <h1 className='title'>{title.toUpperCase()}</h1>
        <span className='sub-title'>Shop Now</span>
    </div>
</div>
)

Issue:
```sh
/components/menu-item/menu-item.component.jsx
Line 5:22: Unexpected template string expression no-template-curly-in-string
Line 7:65: Unexpected template string expression no-template-curly-in-string

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
```
Having an issue image is not loading

[ljharb]

@ManoharSomu your problem is entirely unrelated to this issue. You're not using template literals, which only use backticks.