title: setState using File onLoad
body: <p>I'm having trouble setting the state with <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload" rel="nofollow noreferrer">FileReader's onLoad</a>. The goal is to display multiple images and update the state. </p>
  
  <p>I have read nearly all of the stackoverflow posts and I have tried my best to familiarize myself with the File/FileReader API. Yet, when I try to update my state- the React Developer Tools doesn't have by state updating.</p>
  
  <p>I expect to see two photos on my page and my <code>photoList</code> state to be updated, however, it's not showing up.</p>
  
  <pre><code>class App extends Component{
    constructor() {
      super();
  
      this.state = {
        photoList: []
      };
    }
  
   onSelectFile = event =&gt; {
      event.preventDefault();
      const { photoList } = this.state;
      const { imageFile } = event.target;
  
      for( let i = 0; i &lt; imageFile; i++){
        let reader = new FileReader();
        let file = imageFile[i]
  
        reader.onload = (e) =&gt; {
          const { result } = e.target
          this.setState({
            photoList: [...photoList, result]
          })
        }
  
        reader.readAsDataURL(file)
      }
    }
  
  
    render() {
  
      const { photoList } = this.state;
  
      return (
        &lt;div&gt;
          &lt;input type="file" accept="image/jpeg, image/png" multiple onChange={this.onSelectFile} /&gt; 
          &lt;img src={ photoList } alt=""/&gt;
        &lt;/div&gt;       
      );
    }
  }
  </code></pre>