title: How to handle click on child element
body: <p>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 <code>onClick={this.handleChangeCity} in the</code>"cities"` class</p>
  
  <p>I would love to hear how you get around this. </p>
  
  <p>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</p>
  
  <pre><code>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) =&gt;{ 
        let divClass = index ? cityClass : activeCityClass;
        children.push(&lt;div 
          onClick={this.handleChangeCity} ===&gt; error when this is added
          className={divClass} 
          data-city={city.label}
          key={index}&gt;{city.label}&lt;/div&gt;)
      });
  
      return children;
  
    }
  </code></pre>
  
  <p>I'm not sure why this is happening...</p>
  
  <pre><code>  handleChangeCity = (event) =&gt; {
      event.preventDefault();
      console.log(event.currentTarget);
      this.setState({
        currentCity: event.currentTarget.key
      });
    }
  
  
  
    render() {
      return (
  
        &lt;section className="container"&gt;
          &lt;div className="navigation"&gt;
            &lt;div className = "cities clearfix"&gt;
                 {this.createCities()}
  
            &lt;/div&gt;
  
            &lt;div className="underline"&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>