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

reactjs eslint styled-components prettier
bier hier picture bier hier · Jan 20, 2019 · Viewed 29.3k times · Source

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

Jerome picture Jerome · Jan 20, 2019

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)

Related questions

How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
ESLint Parsing error: Unexpected token

With this code: import React from 'react'; import { Link } from 'react-router'; import { View, NavBar } from 'amazeui-touch'; import * as Pages from '../components'; const { Home, ...Components } = Pages; I get this eslint error: 7:16 error Parsing error: Unexpected token .. Why? Here is my …

Read More
React eslint error missing in props validation

I have the next code, eslint throw: react/prop-types onClickOut; is missing in props validation react/prop-types children; is missing in props validation propTypes was defined but eslint does not recognize it. import React, { Component, PropTypes } from 'react'; class IxClickOut …

Read More