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 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

Reactjs: How to add delete icon?

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(/[wd.-]+@[wd.-]+.[wd.-]+/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 /[wd.-]+@[wd.-]+.[wd.-]+/.test(email);
  }

  render() {
    return (
      <>
        
        <TextField
        InputProps={{
          startAdornment: this.state.items.map(item => (
            <Chip
              key={item}
              tabIndex={-1}
              label={item}
              onDelete={this.handleDelete(item)}
            />
          )),
        }}
          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 && <p className="error">{this.state.error}</p>}
      </>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, 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.

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 <Chip>, 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:

<Chip
   // Other props...
   onDelete={() => this.handleDelete(item)}
/>

Let me know if this works.

Refs:

Advertisement

Answer