Question

0

55

Views

Trouble clearing react.useState with clear button

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>

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T16:52:02.747Z

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}
/>

Answer 2 · 2022-07-03T16:52:02.880Z

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);