Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

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

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}
/>
7 months ago · Juan Pablo Isaza Report

0

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);
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.