How to delete chips in Material UI

user_12870119 0
Viewed 7179

So I have a bunch of chips that were rendered as a user types in a text field and selects on create. Then a chip shows up with the text. I want to have the functionality to delete the chip. This is the sandbox https://codesandbox.io/s/material-demo-xi9hr?file=/demo.js. I want to specifically know what my handleDelete function will do

import React from "react";
import Avatar from "@material-ui/core/Avatar";
import Chip from "@material-ui/core/Chip";
import TextField from "@material-ui/core/TextField";
import { useState } from "react";
import Button from "@material-ui/core/Button";

export default function OutlinedChips() {
  const [hashtag, setHashtag] = useState("");
  const [numberOfHashtags, setNumberOfHashtags] = useState(0);
  const [arrayOfHashtags, addHashtag] = useState([]);
  const handleDelete = () => {
    console.log(hashtag);
  };
  const handleHashtagChange = event => setHashtag(event.target.value);

  const handleClick = () => {
    console.info("You clicked the Chip.");
  };
  const newHashtag = () => {
    if (numberOfHashtags < 3) {
      setNumberOfHashtags(numberOfHashtags + 1);
      addHashtag(arrayOfHashtags => arrayOfHashtags.concat(hashtag));
    } else {
      console.log("Too much hashtags");
    }
  };
  const Hashtags = arrayOfHashtags.map(h => (
    <Chip
      size="small"
      avatar={<Avatar>#</Avatar>}
      label={h}
      onDelete={handleDelete}
    />
  ));
  console.log(arrayOfHashtags);
  return (
    <div>
      <TextField
        size="small"
        inputProps={{
          style: { fontSize: 15 }
        }}
        id="outlined-multiline-static"
        multiline
        rows={1}
        placeholder="Description"
        variant="outlined"
        value={hashtag}
        onChange={handleHashtagChange}
      />
      <Button color="primary" onClick={newHashtag}>
        Create!
      </Button>
      {numberOfHashtags > 0 ? Hashtags : ""}
    </div>
  );
}
material-ui reactjs javascript
3 Answers
user_4062490

The first think you should do is bind a key for each Chip item, so onDelete handler you can decide which chip you should delete in your array. Finally, filter your array to remove that item with match key.

I think you should read Material Docs carefully, It's already have a example about delete a chip, here is the link: https://material-ui.com/components/chips/

And here is my solution: Codesanbox

user_133649250

Try this.. Pass the chips which you want to delete and this.selected_search_tags is the variable in which all chips are stored..

remove(fruit: string): void {
    const index = this.selected_search_tags.indexOf(fruit);
    if (index >= 0) {
      this.selected_search_tags.splice(index, 1);
    }
  }
user_121682350
Related