title: Data not displaying after axios call in React even though data exists
body: <p>After making a <code>post</code> request with axios and getting the response back in a promise, the information exists but does not show up in the <code>preview</code>'s <code>.map()</code> loop. Unless I click on the page in the browser; then the images appear. It's as if the page renders before the data is available. I've tried <code>useEffect()</code> but the result is the same.</p>
  <pre><code>const [imageObjects, setImageObjects] = useState([])
  
  const onDrop = useCallback(files =&gt; {
          const uploadUrl = process.env.REACT_APP_CLOUDINARY_UPLOAD_URL
          let _imageObjects = imageObjects.length &gt; 0 ? imageObjects : []
  
          for (let file of files) {
              const fileName = file.name
              const uploadPreset = process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET
              let data = new FormData()
              data.append('upload_preset', uploadPreset)
              data.append('file', file)
              data.append('multiple', false)
  
              axios({
                  url: uploadUrl,
                  method: 'post',
                  data,
                  withCredentials: false,
                  onUploadProgress: (e) =&gt; {
                      setProgress(Math.round((e.loaded * 100.0) / e.total))
                  }
              }).then(res =&gt; {
                  const delete_token = res.data.delete_token
                  const secure_url = res.data.secure_url
                  _imageObjects.push({ delete_token, secure_url })
                  setProgress(0)
              }).catch(err =&gt; {
                  console.log('Error: ', err)
              })
          }
          setImageObjects(_imageObjects)
  
      })
  </code></pre>
  <p>The code for the <code>div</code> with a <code>preview</code> ID is here:</p>
  <pre><code>&lt;div id=&quot;preview&quot; style={{ border: '1px solid black', minHeight: &quot;75&quot;, display: 'flex', alignItems: 'flex-end' }}&gt;
       {imageObjects &amp;&amp; imageObjects.map(img =&gt; {
            const delete_token = img.delete_token
            return (
                  &lt;span key={img.delete_token}&gt;
                      &lt;Link href=&quot;#&quot; onClick={() =&gt; deletePhoto(delete_token)}&gt;
                          &lt;img src={img.secure_url} alt={img.secure_url} width=&quot;75&quot; height=&quot;auto&quot; /&gt;
                      &lt;/Link&gt;
                   &lt;/span&gt;
              )
        })}
   &lt;/div&gt;
  </code></pre>
  <p>Unless I click anywhere in the browser, the images do not appear. How do I solve this?</p>