title: How to detect area tag onClick in a Image Map in React
body: <p>I want to detect the <code>onClick</code> &amp; <code>onHover</code> on different parts of a image. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src={physicalimage} id="physicalimage" usemap="#image-map"/&gt;
     &lt;map name="image-map"&gt;
     &lt;area target="" onClick={this.consoleMessage("bpleft")} alt="bpleft" title="bpleft"  coords="223,201,269,254" shape="rect" /&gt;
     &lt;area target="" onClick={this.consoleMessage("bpright")} alt="bpright" title="bpright" coords="60,199,101,259" shape="rect" /&gt;
     &lt;area target="" onClick={this.consoleMessage("heart")} alt="heartrate"  title="heartrate" coords="169,124,219,183" shape="rect" /&gt;
  &lt;/map&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I use react library for developing my website. I am not able to detect the <code>onClick</code> event. Are there any other alternative?</p>