title: javascript/react - async/await with for loop POST requests
body: <p>I'm creating a picture converter where my JS code gets the file inputs from the user, sends it to my python back-end where they are converted and saved to a folder. Python then sends a response back to JS (react), which updates the state for each file individually as "converted" and re-renders the necessary components.</p>
  
  <p>I have a for loop that sends individual POST requests for each file. This is fine until I want to create a .zip for the entire directory after all files have been converted. My problem lies there. My zip is always returned empty or with incomplete files.</p>
  
  <pre><code>// function which takes the file inputs from user
  uploadBatch = async () =&gt; {
    const files = this.getFilesFromInput();
    const batch = Math.floor(Math.random() * 999999 + 100000);
    for (let i = 0; i &lt; files.length; i++) {
      // sets the state which will then be updated
      await this.setState(
        {
          files: [
            ...this.state.files,
            {
              // file state values
            }
          ]
        },
        () =&gt; {
          const formData = new FormData();
          // appends stuff to form data to send to python
          axios
            .post('/api/upload', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              responsetype: 'json'
            })
            .then(response =&gt; {
              // update the state for this particular file
            });
        }
      );
    }
    return batch;
  };
  
  // function which zips the folder after files are converted
  handleUpload = async e =&gt; {
    e.preventDefault();
    // shouldn't this next line wait for uploadBatch() to finish before 
    // proceeding?
    const batch = await this.uploadBatch();
    // this successfully zips my files, but it seems to run too soon
    axios.post('/api/zip', { batch: batch }).then(response =&gt; {
      console.log(response.data);
    });
  };
  </code></pre>
  
  <p>I have used async/await but I don't think I've used them well. I don't quite fundamentally understand this concept so an explanation would be greatly appreciated.</p>