title: Why am I getting "potentially invalid reference access to a class field via this in a nested function" error
body: <p>In vanilla JS, my code would work fine.  For this case, I'd like to componentize my <code>Wall</code> class which's supposed to display the image in the browser that the user has uploaded.  Again, this works normally in vanilla JS but not JSX.  </p>
  
  <p>I'm getting a <code>potentially invalid reference access to a class field via this in a nested function</code> on the <code>document.querySelector("#file-input").addEventListener("change", this.previewImages);</code> line which I think is causing the issue.</p>
  
  <p>What am I doing wrong and how can I fix it?  </p>
  
  <pre><code>import React, {Component} from 'react';
  
  class Wall extends Component {
      constructor(props) {
          super(props);
          this.previewImages = this.previewImages.bind(this);
      }
  
      previewImages() {
          let preview = document.createElement("div");
  
          if (this.files) {
              [].forEach().call(this.files, readAndPreview());
          }
  
          function readAndPreview() {
              if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                  return alert(file.name + " is not an image");
              }
  
              let reader = new FileReader();
  
              reader.addEventListener("load", () =&gt; {
                  let image = new Image();
                  image.height = 100;
                  image.title = file.name;
                  image.src = this.result;
  
                  let date = Date.now();
                  let d = new Date(parseInt(date, 10));
                  let ds = d.toString("MM/dd/yy HH:mm:ss");
                  console.log(ds);
  
                  let initialCountOfLikes = 0;
                  let zeroLikes = document.createElement("h1");
                  let zeroLikesTextNode = zeroLikes.createTextNode(initialCountOfLikes + " likes");
  
                  zeroLikes.appendChild(zeroLikesTextNode);
  
                  preview.appendChild(image); // makes image appear
                  preview.appendChild(zeroLikes); // makes like count appear
  
                  image.ondblclick = function() {
                      if (initialCountOfLikes === 0) {
                          console.log("Inside if block");
                          initialCountOfLikes++;
                          console.log("initialCountOfLikes++ =&gt; " + initialCountOfLikes);
                      } else if (initialCountOfLikes === 1) {
                          console.log("inside second else if block");
                          initialCountOfLikes--;
                          console.log("initialCountOfLikes-- =&gt; " + initialCountOfLikes);
                      }
                      zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
                  };
              });
              reader.readAsDataURL(file);
              document.querySelector("#file-input").addEventListener("change", this.previewImages);
          }
      }
  
      render() {
          return (
              &lt;div id="file-input-wrapper"&gt;
                  &lt;input type="file" /&gt;
                  &lt;label htmlFor="file-input" id={"LblBrowse"} /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Wall;
  </code></pre>