title: How to handle array state filter clashes
body: <p>I am currently having an issue where multiple setStates that use the filtering of an array are interfering with each other. Basically if a user uploads two files, and they complete around the same time, one of the incomplete files may fail to be filtered from the array.</p>
  <p>My best guess is that this is happening because they are separately filtering out the one that needs to be filtered, when the second one finishes and goes to filter itself out of the array, it still has the copy of the old incomplete array where the first file has not been filtered out yet. What would be a better way to approach this? Am I missing something obvious? I am thinking of using an object to hold the files instead, but then I would need to create a custom mapping function for the rendering part so that it can still be rendered as if were an array.</p>
  <pre class="lang-js prettyprint-override"><code>fileHandler = (index, event) =&gt;{
      let incompleteFiles = this.state.incompleteFiles
      incompleteFiles[index].loading = true
      incompleteFiles[index].file = event.target.files[0]
      this.setState({ incompleteFiles: incompleteFiles },()=&gt;{
              const fileData = new FormData()
              fileData.append('file', event.targets[0].file)
              let incompleteFiles = this.state.incompleteFiles
              let completeFiles = this.state.completeFiles
                  api.uploadFile(fileData)
                      .then(res=&gt;{
                          if(res.data.success){
                              this.setState(state=&gt;{
                                  let completeFile = {
                                      name : res.data.file.name,
                                  }
                                  completeFiles.push(completeFile)
                                  incompleteFiles = incompleteFiles.filter(inc=&gt;inc.label !== res.data.file.name)
                                  return{
                                      completeFiles,
                                      incompleteFiles
                                  }
                              })
                          }
                      })
          })
      }
  </code></pre>
  <p>Updated with accepted answer with a minor tweak</p>
  <pre><code>fileHandler = (index, event) =&gt;{
      this.setState(({ incompleteFiles }) =&gt; ({       
      //  Update the state in an immutable way.       
          incompleteFiles: [              
              ...incompleteFiles.slice(0, index),              
              {                
                  ...incompleteFiles[index],                
                  loading: true,                
                  file: event.target.files[0],              
              },              
              ...incompleteFiles.slice(index+1)       
          ],     
      }),  () =&gt; {
        const fileData = new FormData()
        fileData.append('file', event.targets[0].file)
        api.uploadFile(fileData)
          .then(res =&gt; {
            if(res.data.success){
                this.setState(({ incompleteFiles, completeFiles }) =&gt; ({
                  completeFiles: [
                    ...completeFiles, // Again, avoiding the .push since it mutates the array.
                    { // The new file.
                      name: res.data.file.name,
                    }
                  ],
                  incompleteFiles: incompleteFiles.filter(inc=&gt;inc.label !== res.data.file.name),
                })))
            }
          })
      });
    }
  </code></pre>