title: How to add a 'mousemove' event listener to a component Cursor which is moved with the cursor pointer in ReactJS?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  
  class Cursor extends Component {
      state = {
          left: 0,
          top: 0
      }
      render() {
          return (
              &lt;div className='cursor'&gt;&lt;/div&gt;
          )
      }
  }
  
  document.addEventListener('mousemove', (e) =&gt; {
      const cursor = document.getElementsByClassName('cursor')[0];
      cursor.setAttribute('style','top:'+e.pageY+'px; left:'+ e.pageX+'px;');
  });
  
  export default Cursor;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code is not updating the state of the react component Cursor. I don't know how to do it. So, I did it in vanilla JavaScript. How can I do it clearly by updating state?</p>