Allow user to delete option from antd select

Question

I am using antd select component in my react app. I want to provide one delete option to user.

See below image for more details:

I have tried to implement it like this:

 {tasks.map((task) => {
    return (
      <Option value={task.value}>
        <span>{task.label}</span>
        <span style={{ float: "right" }}>
          <DeleteOutlined />
        </span>
      </Option>
    );
 })}

By doing this, it gave me output like this:

Here, issue I am facing is that when user selects any option then delete icon should not be there on selected value.

NOTE: Here, clicking on delete icon, I need to delete entry from db

Answer 1

Check the following example using optionLabelProp of <Select/> component

<Select optionLabelProp="label">  /* Add optionLabelProp here */
  {items.map((task) => {
    return (
      <Option value={task.value} label={task.label}> /* Add label here */
        {task.label}
      </Option>
    );
  })}
</Select>

Example

App.jsx

import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { DeleteOutlined } from "@ant-design/icons";
import { Select } from "antd";

const App = () => {
  const { Option } = Select;
  const [items, setItems] = useState([
    {
      id: 1,
      value: "james",
      label: "James"
    },
    {
      id: 2,
      value: "lucy",
      label: "Lucy"
    },
    {
      id: 3,
      value: "lisa",
      label: "Lisa"
    },
    {
      id: 4,
      value: "peter",
      label: "Peter"
    }
  ]);

  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };

  const deleteOption = (value) => {
    setItems(
      items.filter((item) => {
        return item.value !== value;
      })
    );
    console.log("deleted", value);
  };

  return (
    <>
      <Select
        defaultValue="lucy"
        optionLabelProp="label"
        style={{
          width: 170
        }}
        onChange={handleChange}
      >
        {items !== undefined &&
          items.map((task) => {
            return (
              <Option key={task.id} value={task.value} label={task.label}>
                <span>{task.label}</span>
                <span style={{ float: "right" }}>
                  <DeleteOutlined
                    onClick={(e) => {
                      e.stopPropagation();  /* Add e.stopPropagation() */
                      deleteOption(task.value);
                    }}
                  />
                </span>
              </Option>
            );
          })}
      </Select>
    </>
  );
};
export default App;

Output:

Update:

Add e.stopPropagation() to fix selection issue while deleting the option

<DeleteOutlined
   onClick={(e) => {
   e.stopPropagation(); /* Add e.stopPropagation() */
   deleteOption(task.value);
   }}
/>

Hope this helps! Thank you :)