ReactJS FilePond - uploading to one FilePond component clears the state in other FilePond components in same page

Question

This question is about Filepond in ReactJS. Filepond documentation here: https://pqina.nl/filepond/docs/patterns/frameworks/react/

[EDIT] A self-contained code sandbox reproducing the issue with only relevant code is here: https://codesandbox.io/s/react-filepond-forked-cvck1?file=/src/App.js

I have made this component which is a wrapper around FilePond:

export const FormFilePond = ({ id, state, updateFormState, ...props }) => (
  <Box borderWidth={5} borderRadius={10} borderStyle='dashed'>
    <FilePond
      style={{'margin-bottom':0}}
      name={id}
      files={state}
      onupdatefiles={
        fileItems => {
          console.log("Updating filepond: ", id)
          updateFormState(id, fileItems.map(fileItem => fileItem.file))
        }
      }
      {...props}
    />
  </Box>
)

(The console.log() call will illustrate the problem below.)

I have multiple FormFilePond instances on the same page, with unique id. The value and updateFormState are defined elsewhere using React.useState in the parent component, so this is a controlled component. updateFormState basically searches for the key (id) in the object that keeps track of the entire form state, and updates just the value at that key. That said, I think it's likely a FilePond-specific issue as I have several other form input components that all control state correctly with the same functions. It's only the FilePond component that has this problem.

<FormFieldComponent
   id={id}
   state={value}
   updateFormState={updateFormState}
   {...props}
 />

Let's say I have two FilePond instances with ids of "foo" and "bar". First, when I upload a file to the "foo" FilePond, the console logs:

Updating filepond:  foo
Updating filepond:  foo

And I see the uploaded file in the FilePond component correctly, though I don't understand why it updates twice. [Edit to add: None of the other form components (input, textarea, checkbox, etc) update twice when I console.log the updates, they only log once.] Then, I try to upload an image to "bar" FilePond. I get this:

Updating filepond:  bar
Updating filepond:  bar
Updating filepond:  foo
Updating filepond:  bar

The above is actually the following happening in quick succession:

1. When the first two lines are logged to console, I see the file successfully uploaded to the bar component for a split second, but then:
2. The second two lines are logged to console, and both the foo and bar components' states are cleared. Both FilePonds have lost their files and are empty again.

Why is this happening, and how can I fix it? The behavior I want is: to have multiple separate FilePonds that track different files in different parts of the state. The end user should be able to upload files to all of them.

Answer 1

I posted the same issue on Github and it was answered: https://github.com/pqina/react-filepond/issues/153

It was not a glitch with Filepond but rather a logic error I had made with React state. Please see explanation + resources here: https://github.com/pqina/react-filepond/issues/153#issuecomment-705948028

(Much gratitude to Github user sweetliquid for the help.)