移除 headlessUi 芯片

Question

I need to remove a headlessUi after having added it.

There is one array of elements

myChips = [
  {name: "test", id: 0},
  {name: "test", id: 1},
  {name: "test", id: 2},
]

Then i set my chips like follows:

{myChips &&
  myChips.map(({name, id }) => {
    return (
      <Chip
        name="test"
        value={id}
        key={id}
        label={`${name}- ${id}`}
        onDelete={(e) => console.log(e.target.value)}
      />
    );
  })}

It shows me this:

The problem is that i need to delete them. There no seems to get the value of the chip I click on. In fact when I click on "x" event.target.value is undefined so there is no way to delete the right element from the array.

How do you think it can be solved?

Answer 1

You have to pass the id to the delete function to delete an element. For example-

<Chip
    name="test"
    value={id}
    key={id}
    label={`${name}- ${id}`}
    onDelete={(e) => handleDelete(e, id)}
/>

And at the handleDelete() funciton-

const handleDelete = (e, id) => {
    const _chips = myChips.filter(chip => chip.id !== id);

    // This is from useState I am assuming here
    setChips(_chips);
}