title: Why won't my counter work upon clicking the canvas?
body: <p>I want to increment the number of times the ball which's bouncing around in the browser gets clicked via <code>this.setState({count: this.state.count + 1});</code>.  I figured what I have in my code should work because I've done this before without using canvas, but it's not working.</p>
  
  <p>What am I doing wrong in my code &amp; how can I fix it?</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Main.css';
  
  class Main extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              count: 0
          };
      }
  
      componentDidMount() {
          let c = document.getElementById("mycanvas");
          let cxt = c.getContext("2d");
          let x = 0;
          let y = 0;
          let r = 10;
          let dx = 4;
          let dy = 8;
          let WIDTH = 240;
          let HEIGHT = 240;
  
          c.onclick = function () {
              this.setState({count: this.state.count + 1});
          };
  
          function init() {
              window.requestAnimationFrame(init, cxt);
              draw();
          }
  
          function drawCircle(x, y, r) {
              cxt.clearRect(0, 0, 240, 240);
              cxt.beginPath();
              cxt.arc(x, y, r, 0, Math.PI * 2, false);
              cxt.fillStyle = "#006699";
              cxt.fill();
          }
  
          function draw() {
              drawCircle(x, y, r);
  
              if(x + dx &gt; WIDTH || x + dx &lt; 0) {
                  dx = -dx;
                  // console.log(dx);
              }
  
              if(y + dy &gt; HEIGHT || y + dy &lt; 0){
                  dy = -dy;
              }
  
              x += dx;
              y += dy;
          }
          init();
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;canvas id="mycanvas" width="240" height="240"/&gt;
                  &lt;h1&gt;{this.state.count}&lt;/h1&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Main;
  </code></pre>
  
  <p>Here's the error:</p>
  
  <pre><code>TypeError: Cannot read property 'count' of undefined
  HTMLCanvasElement.c.onclick
  src/containers/Main/Main.js:25
    22 | let HEIGHT = 240;
    23 | 
    24 | c.onclick = function () {
  &gt; 25 |     this.setState({count: this.state.count + 1});
    26 | };
    27 | 
    28 | function init() {
  </code></pre>