Remove/Delete an item from an Array of Objects in ReactJS

Question

I want the specific item to delete when a user clicks on the button. No code for 'removeItem' currently because nothing worked when I tried except error(s). I want to delete the item from screen and from an Array of Objects also when 'delete button' is pressed. My code goes as below:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "David", profile: "dancer", description: "His dance is very good" },
        { name: "Kevin", profile: "singer", description: "He sings well" },
        { name: "Kristen", profile: "drummer", description: "He plays drum very awesome" }
      ],
      filteredData: [{}]
    };
  }

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Employee: </label>
        <input
          type="text"
          value={this.state.term}
          id="searchEmp"
          placeholder="Enter Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("Please don\'t enter space.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>Name = {item.name}</div>
                  <div>Job Profile = {item.job_profile}</div>
                  <div>Description = {item.description}</div>
                  <input type="button" id="button" value="Delete"/>
                  <div>{<br></br>}</div>
                </div>
              );
            })}
      </div>
    );
  }
}
export default App;

How can I delete the searched or an employee from screen?

Answer 1

One nice way to do this by using filter.

import "./styles.css";

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        {
          name: "David",
          profile: "dancer",
          description: "His dance is very good"
        },
        { name: "Kevin", profile: "singer", description: "He sings well" },
        {
          name: "Kristen",
          profile: "drummer",
          description: "He plays drum very awesome"
        }
      ],
      filteredData: [{}]
    };
  }

  handleDelete = (e) => {
    let nameToDelete = e.target.dataset.name;
    this.setState((prevState) => {
      return {
        names: prevState.names.filter((person) => person.name !== nameToDelete)
      };
    });
  };

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Employee: </label>
        <input
          type="text"
          value={this.state.term}
          id="searchEmp"
          placeholder="Enter Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("Please don't enter space.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>Name = {item.name}</div>
                  <div>Job Profile = {item.job_profile}</div>
                  <div>Description = {item.description}</div>
                  <input
                    type="button"
                    data-name={item.name}
                    value="Delete"
                    onClick={this.handleDelete}
                  />
                  <div>{<br></br>}</div>
                </div>
              );
            })}
      </div>
    );
  }
}
export default App;

So the two pieces that are different are the event handler

handleDelete = (e) => {
  let nameToDelete = e.target.dataset.name;
  this.setState((prevState) => {
    return {
      names: prevState.names.filter((person) => person.name !== nameToDelete)
    };
  });
};

and the event listener on the button:

<input
  type="button"
  data-name={item.name}
  value="Delete"
  onClick={this.handleDelete}
/>