How to handle click on child element

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>

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.