How to fix 'Static HTML elements with event handlers require a role.'?

Question

My reactjs styledcomponent contains this code:

<a styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

This works fine but the eslint is complaining:

Static HTML elements with event handlers require a role.

How can I fix this error?

Answer 1

you need to add a role props in your a tag to avoid this warning, for example a button

<a role = "button" styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

I guess it is because the HREF props is missing in your anchor tag (not sure)