title: Upload multiple images and save to array in React JS
body: <p>Need help getting a full list of pictures that are uploaded with the codes below then save it to an array:</p>
  <pre><code>const [pictures, setPictures] = useState([{
          data: [],
          url: &quot;&quot;
      }])
  
      const handleImageUpload = (e) =&gt; {
  
          [...e.target.files].forEach(file =&gt; {
              console.log(&quot;file &gt;&gt;&gt; &quot;, file)
  
                   setPictures([
                      ...pictures,
                      {
                          data: file,
                          url: URL.createObjectURL(file)
                      }
                  ])
  
                  console.log(&quot;pictures &gt;&gt; &quot;, pictures)
              })
      }
  </code></pre>
  <p>Whenever I show a preview of the images, it only shows the last image that was uploaded so my guess is the input:file is running async</p>
  <pre><code>&lt;div className=&quot;post__pictures&quot;&gt;
      &lt;input type=&quot;file&quot; multiple 
          onChange={handleImageUpload}
          accept=&quot;image/*&quot;
      /&gt;
  
          {pictures?.map(pic =&gt; (
              &lt;img src={pic.url} /&gt;
          ))}
  &lt;/div&gt;
  </code></pre>
  <p>Below are the results in the console log</p>
  <pre><code>    file &gt;&gt;&gt;  
          File {name: &quot;software-development-coding-process-concept-260nw-1483883831.png&quot;, lastModified: 1609189641927, lastModifiedDate: Tue Dec 29 2020 01:07:21 GMT+0400 (Gulf Standard Time), webkitRelativePath: &quot;&quot;, size: 14722, …}
          Post.js:51 
      
      pictures &gt;&gt;  
          [{…}]
          0: {data: Array(0), url: &quot;&quot;}
          length: 1
          __proto__: Array(0)
          Post.js:41 
  
  file &gt;&gt;&gt;  
          File {name: &quot;software-language-programmer-avatar-vector-17866088.jpg&quot;, lastModified: 1609301370464, lastModifiedDate: Wed Dec 30 2020 08:09:30 GMT+0400 (Gulf Standard Time), webkitRelativePath: &quot;&quot;, size: 131625, …}
          Post.js:51 
      
      pictures &gt;&gt;  
          [{…}]
          0: {data: Array(0), url: &quot;&quot;}
          length: 1
          __proto__: Array(0)
          Post.js:41 
  
  file &gt;&gt;&gt;  
          File {name: &quot;stock-market-chart-600w-252511228.webp&quot;, lastModified: 1609532996651, lastModifiedDate: Sat Jan 02 2021 00:29:56 GMT+0400 (Gulf Standard Time), webkitRelativePath: &quot;&quot;, size: 62182, …}
          Post.js:51 
      
      pictures &gt;&gt;  
          [{…}]
          0: {data: Array(0), url: &quot;&quot;}
          length: 1
          __proto__: Array(0)
  </code></pre>