title: "this.setState is not a function" when using setState inside a nested addEventListener function
body: <p>I for the life of me can't get passed this TypeError inside my react component. I've read every relevant thread and implemented almost every suggested fix to no avail. </p>
  
  <pre><code>import React, { Component } from "react";
  
  class Wave extends Component {
      state = {
          position: 44
      };
  
      changePosition = () =&gt; {
          let parentDiv = document.getElementById('parentDiv');
          //this.setState({position: 3})
  
          parentDiv.addEventListener('click', function (e) {
              let offset = this.getClientRects()[0];          
              alert(e.clientX - offset.left);
              let xcord = e.clientX - offset.left;
              this.setState({position: xcord})
          }, false);
      }
  
      render() {          
          return (
              &lt;div id={"parentDiv"}&gt;
                  &lt;div id={"childDiv"} onClick={this.changePosition}&gt;HI THERE!&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Wave;
  </code></pre>
  
  <p>I understand that I'm losing the React class <code>this</code> context and have tried binding the <code>changePosition</code> method inside the component constructor which didn't seem to work. I also tried using <code>.bind(this)</code> at the end of the addEventListener function -</p>
  
  <pre><code>changePosition = () =&gt; {
      let parentDiv = document.getElementById('parentDiv');
      //this.setState({position: 3})
  
      parentDiv.addEventListener('click', function (e) {
          let offset = this.getClientRects()[0];          
          alert(e.clientX - offset.left);
          let xcord = e.clientX - offset.left;
          this.setState({position: xcord})
      }.bind(this), false);
  }
  </code></pre>
  
  <p>But when I do this, as well as when I try changing the addEventListener function to an arrow function <code>(e) =&gt; {</code> then I'm left with <code>TypeError: this.getClientRects is not a function</code></p>
  
  <p>Any enlightenment on how to get around this error is extremely appreciated as this has now eaten up the last 2-3 hours of my day. Thank you very much!</p>