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

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>
)

eslint@5.16.0 eslint-plugin-react@7.14.3

[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

[nazariydolfin]

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