On Component Re-rendering, input file with value not working

Question

I'm using controlled Input with type file in React Component. If I selected one file in input component and toggling show/hide behavior of main component. On Component re-renders input is not working and throwing below error:

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

const [filePath, setPath] = useState('');
<input
    key={"a"}
    id={"1"}
    name={"file input"}
    type="file"
    value={filePath}
    multiple
    onChange={(event) =>
      setPath(event.target.value)
    }
  />

Answer 1

You are referring wrong thing for getting filename

you should use event.target.files[0]

try using

onChange={(event) => setPath(event.target.files[0].name)}

and if you are setting default value to empty string to your state variable const [filePath, setPath] = useState('');

then just this should work too

value={filePath}

Also you might need to consider using defaultValue prop

Answer 2

Your syntax problem

Change

value={filePath | ''}

to

value={filePath || ''}