title: Updating the state on every iteration of for loop
body: <p>guys!
  I have a problem when going through every iteration of the <code>for-loop</code> my array variable in the state remains with 1 element. Here is my input<br>
      <code>&lt;input accept="image/*" type="file" onChange={handlePhotoChange} multiple/&gt;</code>
  and this is the <code>handlePhotoChange</code> method</p>
  
  <pre><code>const [images, setImages] = useState([])
  const handlePhotoChange = async (event) =&gt; {
      const { files } = event.target;
  
      for (let i = 0; i &lt; files.length; i += 1) {
        const file = files[i];
  
        if (!file.type.match('image')) {
          continue;
        }
  
        setImages([...images, { loading: true, src: null }]);
        await firebase.doUploadImage(file, auth.uid);
        const url = await firebase.getImageUrl(file.name, auth.uid);
        setImages([...images.slice(0, -1), { loading: false, src: url }]);
      }
  }
  
  </code></pre>
  
  <p>What I am doing here is setting the loading variable to true before uploading the image in firebase storage and by this <code>loading</code> I show a loader. Then my upload is ready and I get the firebase url of the image and overwrite the last element in the array images[]. Then we continue with next image. This way I am going to show a loader on every single image. But the problem is that <code>images</code> array after the loop has only the last added element. I guess it is something with the <code>setImages</code> function that is async but waiting for your opinions. Thank you :)</p>