How to handle click on child element

Question

Why did this produce error when I'm doing a click event on a child element here? It also produced an error when I attached onClick={this.handleChangeCity} in the"cities"` class

I would love to hear how you get around this.

Eslint error: [eslint] Visible, non-interactive elements with click handlers must have at least one keyboard listener. (jsx-a11y/click-events-have-key-events) [eslint] Static HTML elements with event handlers require a role. (jsx-a11y/no-static-element-interactions) (JSX attribute) onClick: any

import React from "react";
import ReactDOM from "react-dom";
import jsonData from "./navigation.json";

class App extends React.Component {
    constructor(props) {
super(props);

this.state = {
  loading: true,
  cities : jsonData.cities,
  currentCity: jsonData.cities[0].label,
};

this.handleChangeCity = this.handleChangeCity.bind(this);
  }

  createCities(){
    //let cityList = [];
    let children = [];
    let cityClass = 'oneCity';
    let activeCityClass = `${cityClass} active`;
    this.state.cities.forEach((city, index) =>{ 
      let divClass = index ? cityClass : activeCityClass;
      children.push(<div 
        onClick={this.handleChangeCity} ===> error when this is added
        className={divClass} 
        data-city={city.label}
        key={index}>{city.label}</div>)
    });

    return children;

  }

I'm not sure why this is happening...

  handleChangeCity = (event) => {
    event.preventDefault();
    console.log(event.currentTarget);
    this.setState({
      currentCity: event.currentTarget.key
    });
  }



  render() {
    return (

      <section className="container">
        <div className="navigation">
          <div className = "cities clearfix">
               {this.createCities()}

          </div>

          <div className="underline"></div>
        </div>
      </section>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

Well it looks like you got 2 linting errors. First is Visible, non-interactive elements with click handlers must have at least one keyboard listener.. That looks like it's about accessibility, so people can use keyboard and mouse to interact. So you have to add a key handler too, check out this similar post.

The second issue is Static HTML elements with event handlers require a role.. This is a linting option which prevents binding of event handler to generic things like a <div/>. Check out this post for an answer to that.

Alternatively, you could change or disable your linting so these are no longer issues.

Answer 2

These are linting issues as mentioned in ESLint documentation as following:

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.

To fix this you can use any of the above mentioned props and change your code to this:

<div 
   onClick={this.handleChangeCity}
   onKeyDown={this.handleChangeCity}
   className={divClass} 
   data-city={city.label}
   key={index}>{city.label}
</div>