Reactjs: How to add delete icon?

Question

In my project, there is an input field to add email values. Here added chips to convert the added items to tags. but I don't know how to add the "X" delete button inside each tag

import React from "react";
import ReactDOM from "react-dom";
import Chip from "@material-ui/core/Chip";
import "./styles.css";
import TextField from "@material-ui/core/TextField";

class App extends React.Component {
  state = {
    items: [],
    value: "",
    error: null,

  };

  handleKeyDown = evt => {
    if (["Enter", "Tab", ","].includes(evt.key)) {
      evt.preventDefault();

      var value = this.state.value.trim();

      if (value && this.isValid(value)) {
        this.setState({
          items: [...this.state.items, this.state.value],
          value: ""
        });
      }
    }
  };

  handleChange = evt => {
    this.setState({
      value: evt.target.value,
      error: null
    });
  };

  handleDelete = (item) => {
    console.log("delete")
    
  };
  
  handleItemEdit = item =>{
      const result = this.state.items.filter(values=>values!==item)
      this.setState({
        value: item,
        error: null,
        items: result
      });
  }

  handlePaste = evt => {
    evt.preventDefault();

    var paste = evt.clipboardData.getData("text");
    var emails = paste.match(/[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/g);

    if (emails) {
      var toBeAdded = emails.filter(email => !this.isInList(email));

      this.setState({
        items: [...this.state.items, ...toBeAdded]
      });
    }
  };

  isValid(email) {
    let error = null;

    if (this.isInList(email)) {
      error = `${email} has already been added.`;
    }

    if (!this.isEmail(email)) {
      error = `${email} is not a valid email address.`;
    }

    if (error) {
      this.setState({ error });

      return false;
    }

    return true;
  }

  isInList(email) {
    return this.state.items.includes(email);
  }

  isEmail(email) {
    return /[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/.test(email);
  }

  render() {
    return (
      <>
        
         (
            
          )),
        }}
          ref={this.state.items}
          className={"input " + (this.state.error && " has-error")}
          value={this.state.value}
          placeholder="Type or paste email addresses and press `Enter`..."
          onKeyDown={this.handleKeyDown}
          onChange={this.handleChange}
          onPaste={this.handlePaste}
        />

        {this.state.error && {this.state.error}}
      
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

I am a beginner in reactjs. I don't know if there is any problem while using chips component so please give me valuable solutions to solve this problem.

user_15169145 · Answer

The Material-UI library you are using makes this very easy.
Their components behave differently based on the types of props you provide them with.

In the case of , if you pass an onDelete method, it should automatically show the "X" at the end.

However, since you already did that, it should work.
My guess here is that maybe it doesn't register properly due to the way you pass the function.

In React, when passing function to components, etc.. we should pass them as callbacks, instead of calling them directly.

Example:

 this.handleDelete(item)}
/>

Let me know if this works.

Refs:

user_18176857 · Answer

There are two ways to add icon

Way 1 u can use material ui icons to add icon Way 2 u can use bootstrap 5 to add icon

By way 2 the steps are

Step 1 Keep the cdn in the head part in index.html

Step 2 is to add your icon where we want

Reactjs: How to add delete icon?

2 Answers