I have this Upload component that I got from antd : react ant design documentation

<Upload

  beforeUpload={()=> {

    return false; }}

  onChange={e => onChangeFile(e, index)}

  onRemove={e => onRemoveFile(e, index)}

>

  <Button

    icon={<UploadOutlined />}

  >

    Upload a file

  </Button>

</Upload>

After uploading the file, a remove icon appears. When I click on the remove button the file does not get removed from the state.

here is the onChange function :

const onChangeFile = (info, index) => {

    console.log("onChange info = " + info);

    const newForm = form;

    newForm.inputs[index].value = info.file;

    setForm({

      ...form,

      from: newForm

    });

    console.log("onChange form = " + form);

};

I tried removing it using onRemove function like this:

const onRemoveFile = (info, index) => {

   console.log("onRemove info = " + info);

   const newForm = form;

   newForm.inputs[index].value = null;

   setForm({

     ...form,

     from: newForm

   });

   console.log("onRemove form = " + form);

};

the output of the console logs :

screenshot of the UI:

feel free to try a few things in this code example provided by antd:

https://codesandbox.io/s/qj6n3?file=/index.js