I am finding it difficult to clear this file input that I am setting to setImportFile useState. This is the useState I declared
const [importFile, setImportFile] = React.useState<File | null>();
const [fileError, setFileError] = React.useState<string>("");
I clear two useState variables in this const method but only one gets cleared which is setFileError.
const clearModal = () => {
setImportFile(null);
setFileError("");
};
I use setImportFile in this method
const onChangeImportFile = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
setImportFile(e.currentTarget.files ? e.currentTarget.files[0] : null);
setSaving(true);
};
This is my render in which I use the clear button and only the error would clear out but the file input will not clear out. I want to empty everything in the modal
<Form.Control
type="file"
accept='.csv, .xls, .xlsx'
required
className="primary mb-3"
name=""
onChange={onChangeImportFile}
/>
<Button variant="secondary" onClick={clearModal} > Clear </Button>
I think you need to pass the state value to the Form.Control, to make it controlled (otherwise it's not getting its value from the state).
<Form.Control
type="file"
accept='.csv, .xls, .xlsx'
required
className="primary mb-3"
name=""
value={importFile}
onChange={onChangeImportFile}
/>
You don't need to set File | null as SetStateAction will be set to undefined.
Try this:
const [importFile, setImportFile] = React.useState<File>();
setImportFile(undefined);