title: Place <div> at x,y coordinate in React
body: <p>I have a simple component which looks like this:</p>
  
  <pre><code>import React from "react";
  import './MyContainer.css';
  
  class MyContainer extends React.Component {
      constructor(props) {
  
          super(props);
  
          this.state = {
  
          };
  
      }
  
      showWhereClicked = (e) =&gt; {
          console.log(`you have clicked X:${e.screenX} Y:${e.screenY}`);
  
          // do stuff
      }
  
  
  
      render() {
          return (
              &lt;div className="myContainer" onClick={this.showWhereClicked}&gt;
                  I am 500px tall.
              &lt;/div&gt;
          );
      }
  }
  
  export default MyContainer;
  </code></pre>
  
  <p>Whenever I click anywhere inside <code>&lt;MyContainer /&gt;</code>, I get a console message giving me an X and Y coordinate of where I clicked on screen.</p>
  
  <p>I wish to place a <code>&lt;div&gt;</code> inside  at the X and Y location of my mouse click. Ideally a box or something, say 100x100px wide. </p>
  
  <p>Later I wish to implement a way for me to freely move these <code>&lt;div&gt;</code> components around the screen.</p>
  
  <p>How can I achieve this?</p>