In the code below, I am trying to remove a person from what will eventually be an org chart when the delete button next to their name is clicked. At the moment, nothing happens. The closest I've e is all 5 people being deleted when any one of the delete buttons is clicked, but I only want the one person deleted who's button is clicked. I feel like I'm making more of a JS error than a React error.

See the full code sandbox here.

Any help would be appreciated, thank you!

    import React from "react";
import { Component } from "react";

const list = [
  {
    name: "Person 1",
    phone: "123-4567",
    itemId: 11
  },
  {
    name: "Person 2",
    phone: "123-4567",
    itemId: 12
  },
  {
    name: "Person 3",
    phone: "123-4567",
    itemId: 23
  },
  {
    name: "Person 4",
    phone: "123-4567",
    itemId: 34
  },
  {
    name: "Person 5",
    phone: "123-4567",
    itemId: 45
  }
];

class Entry extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: list
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person !== e.target.value;
      })
    });
  }

  render() {
    return (
      <div>
        {this.state.list.map(item =>
          <tr key={item.itemId}>
            <td>
              {item.name}
            </td>
            <td>
              {item.phone}
            </td>
            <td>
              <a className="delete" onClick={this.handleClick} />
            </td>
          </tr>
        )}
      </div>
    );
  }
}

export default Entry;

In the code below, I am trying to remove a person from what will eventually be an org chart when the delete button next to their name is clicked. At the moment, nothing happens. The closest I've e is all 5 people being deleted when any one of the delete buttons is clicked, but I only want the one person deleted who's button is clicked. I feel like I'm making more of a JS error than a React error.

See the full code sandbox here.

Any help would be appreciated, thank you!

    import React from "react";
import { Component } from "react";

const list = [
  {
    name: "Person 1",
    phone: "123-4567",
    itemId: 11
  },
  {
    name: "Person 2",
    phone: "123-4567",
    itemId: 12
  },
  {
    name: "Person 3",
    phone: "123-4567",
    itemId: 23
  },
  {
    name: "Person 4",
    phone: "123-4567",
    itemId: 34
  },
  {
    name: "Person 5",
    phone: "123-4567",
    itemId: 45
  }
];

class Entry extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: list
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person !== e.target.value;
      })
    });
  }

  render() {
    return (
      <div>
        {this.state.list.map(item =>
          <tr key={item.itemId}>
            <td>
              {item.name}
            </td>
            <td>
              {item.phone}
            </td>
            <td>
              <a className="delete" onClick={this.handleClick} />
            </td>
          </tr>
        )}
      </div>
    );
  }
}

export default Entry;

• javascript
• reactjs

• what value are you expecting e.target.value to be? – Cruiser Commented Aug 16, 2017 at 13:13

3 Answers 3

Your click event has no value, you can pass the itemId:

onClick={() => this.handleClick(item.itemId)}

Then your handleClick should look like:

handleClick(itemId) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person.itemId !== itemId;
      })
    });
  }

https://codesandbox.io/s/mo2l8z7469

Both the above solution violates one of the best practices or I should say essential practices of react, that we should use property initializer syntax, which is passing the function defined above instead of passing an arrow function inside prop you can read it here in last paragraph of https://facebook.github.io/react/docs/handling-events.html

class Entry extends Component {
  /* your handler method */
  handleDelete(itemId){
    return () => {
      this.setState({
        /* logic to filter deleted item from old state */
      });
    }
  }
  /* render method */
  render() {
    return (
      <div>
        {/* passing onDelete callback */}
        <a className="delete" onClick={this.handleClick(item.id)} />
      </div>
    )
  }
}

//import React from 'react';
//import ReactDOM from 'react-dom';

const list = [
  {
    name: "Person 1",
    phone: "123-4567",
    itemId: 11
  },
  {
    name: "Person 2",
    phone: "123-4567",
    itemId: 12
  },
  {
    name: "Person 3",
    phone: "123-4567",
    itemId: 23
  },
  {
    name: "Person 4",
    phone: "123-4567",
    itemId: 34
  },
  {
    name: "Person 5",
    phone: "123-4567",
    itemId: 45
  }
];

class Entry extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      list: list
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(item) {
    let filterList = this.state.list.filter((user) => {
       if(user.itemId === item.itemId) {
          return false;
       }
       return true;
    })
    this.setState({
      list: filterList
    });
  }

  render() {
    return (
      <div>
      <table>
      <tbody>
        {this.state.list.map(item =>
          <tr key={item.itemId}>
            <td>
              {item.name}
            </td>
            <td>
              {item.phone}
            </td>
            <td>
              <button className="delete" onClick={() => this.handleClick(item)} >Del</button>
            </td>
          </tr>
        )}
        </tbody>
        </table>
      </div>
    );
  }
}

ReactDOM.render(
   <Entry />,
   document.getElementById('app')
);

delete

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>