title: React, Want to get current mouse position of the current element
body: <p>I want to get the current mouse position within a &lt;div&gt;, and then draw something on that position in the &lt;div&gt;.</p>
  
  <pre><code>&lt;chrome screen&gt;
  ----------------------------------------------
  |                                            |
  |    &lt;div&gt;                                   |
  |    --------------------------              |
  |    |                        |              |
  |    |                        |              |
  |    | .  &lt;-- mouse position and i want to draw something here  
  |    |        when clicking here             |
  |    |------------------------|              |
  |                                            |
  |--------------------------------------------|
  </code></pre>
  
  <p>I tried to code with React Framework. And the problem is that I <strong>cannot get an accurate position to draw something</strong>.</p>
  
  <p>I googled on how to get current position of the current element in react, and tried below</p>
  
  <pre><code>render(){
      return (
          &lt;canvas ref="canvas" className="DrawReflect" onMouseDown={this.startDrawing}&gt;
          &lt;/canvas&gt;
      );
  }
  
  startDrawing(e){
  
      switch(this.context.drawingTool){
  
          case "pen":
              // Stuck on getting mouse position. None of google's source is not accurate.
              //this.drawPen(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
              //this.drawPen(e.pageX - e.target.offsetLeft, e.pageY - e.target.offsetTop);
  
              break;
      }
  }
  
  drawPen(cursorX, cursorY){
      // Just for showing drawing information in a label
      this.context.updateDrawInfo({
          cursorX: cursorX,
          cursorY: cursorY,
          drawingNow: true
      });
  
      // Draw something
      const canvas = this.refs.canvas;
      const canvasContext = canvas.getContext("2d");
      canvasContext.beginPath();
      canvasContext.arc(
                      cursorX, cursorY /* start position */, 
                      1, /* radius */
                      0, /* start angle */
                      2 * Math.PI /* end angle */);
      canvasContext.stroke();
  
  }
  </code></pre>
  
  <p>So simply put,
  How do I get the current mouse position of the div in React?</p>