Disable eslint warning

Question

Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. (jsx-a11y/anchor-is-valid)

I would like to disable the above warning.

So i write

<div data-g-id={this.props.g.id}>
  (// eslint-disable-next-line anchor-is-valid)
  <a
    className='classname'
    href="#"
    data-point="TL"
    onClick={this.callFunction}
   >
</div>

But the above one is not working.

Nady

Can you add atleast one more line? – Shimmy

@16kb Updated the question – Nady

Do you know if eslint is run on the jsx file or on the output js file? Cause comments might not make it to the js ones? – Harrar

Use {} instead of () – Shimmy

@HoriaComan I did not get your point. Please elaborate. Thanks. – Nady

jsx files get compiled to js files. Depending on how eslint is setup, you might run it on the jsx ones or on the resulting js files. If it's the latter, comments might not be preserved when transforming them, so eslint would not know to disable the warning. – Harrar

@HoriaComan Now I get your point. So what can I do in my case. I can't change my anchor tag to button here. It will affect my whole application. – Nady

Answer 1

Use

{
  // eslint-disable-next-line anchor-is-valid
}
<a
...

instead of ()

Shimmy

Answer 2

You can also do it globally in .eslintrc file:

{
  "rules": {
    "jsx-a11y/anchor-is-valid": 0
  }
}

Standstill