title: Converting JS code to React.js, can't see what I'm doing wrong
body: <p>quick question I have that I've been stuck on for a while.  I have some vanilla JS code that uploads files and displays what the user has uploaded in the browser. </p>
  
  <p>Below in my code, I'm trying to convert my vanilla JS to react.js code.  In vanilla, I can nest <code>readAndPreview()</code> within <code>previewImages()</code> but in react.js I get an error <code>Unresolved method or function readAndPreview()</code> in my IDE (not console), why so?</p>
  
  <p>What am I doing wrong and how can I fix it?  I'm open to any sort of criticism :). </p>
  
  <pre><code>import React, {Component} from 'react';
  
  class Wall extends Component {
      constructor(props) {
          super(props);
  
          this.previewImages = this.previewImages.bind(this);
          this.readAndPreview = this.readAndPreview.bind(this);
      }
  
      previewImages() {
          const preview = React.createElement('div');
  
          if (this.files) {
              [].forEach().call(this.files, this.readAndPreview());
          }
  
          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;
                  const zeroLikes = React.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 (event) {
                      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;/label&gt;
                  {this.readAndPreview()}
              &lt;/div&gt;
          );
      }
  }
  
  export default Wall;
  </code></pre>