Delete a value from the list in ReactJs

Question

I am using antd, upload component.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Upload, Button } from "antd";
import { UploadOutlined } from "@ant-design/icons";

const fileList = [
  {
    uid: "-1",
    name: "xxx.png",
    status: "done",
    url:
      "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    thumbUrl:
      "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  },
  {
    uid: "-2",
    name: "yyy.png",
    status: "error"
  }
];

console.log(fileList);
const Demo = () => {
  const [state, setState] = useState([...fileList]);
  const add = () => {
    setState([
      ...state,
      {
        uid: "-3",
        name: "xxdx.png",
        status: "done",
        url:
          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
        thumbUrl:
          "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
      }
    ]);
  };
  return (
    <>
      <button onClick={add}>add</button>
      <Upload
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        listType="picture"
        fileList={[...state]}
      >
        <Button icon={<UploadOutlined />}>Upload</Button>
      </Upload>
    </>
  );
};

ReactDOM.render(<Demo />, document.getElementById("container"));

I want to delete an image from the list bellow uploader, but something is wrong and it does not work.
Why deleting images does not work?
demo: https://codesandbox.io/s/pictures-with-list-style-antd4130-forked-umels?file=/index.js:0-1382

Do you have a delete function somewhere? If so, it would be worth including it. — DBS
– DBS, Commented Mar 1, 2021 at 16:50

JAM · Accepted Answer · 2021-03-01 16:57:34Z

1

You are missing an onRemove prop on the Upload component to handle removal of items.

<Upload
  // ...
  onRemove={(file) => {
    // Remove the file from the state
    setState(state.filter(item => item.uid !== file.uid))
  }}
>

answered Mar 1, 2021 at 16:57

JAM

6,2251 gold badge36 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asking Over a year ago

thanks, but why if i wrap the upload with Form, the list of images does is not showed? How to make it visible? I don't have to use initalValues of form, i need to make it workable with filelist. Could you help please

JAM Over a year ago

@Asking I'm not sure, I am not familiar with the framework. I think you should post a new question related to that specific question.

Collectives™ on Stack Overflow

Delete a value from the list in ReactJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related