Update React table after deleting row

Question

I'm new to React and have created a dynamic tablefrom a JSON received from the back-end server that I have. For each table row I have a button that opens to a dropdown which has two options - to edit the information in the row and to delete the row. I've made a separate component for the dropdown button and presently am passing the ID of the row to it. With the present code, I'm able to delete the row but can only see the change on refreshing the page. I've looked at other answers to problems like mine with people saying the state needs to be updated but I'm confused about how to go about it in this case.

EDIT: I'm not use anything for managing state. Just plain simple React

This is the code for the table that gets rendered :-

<table className="table">
          <thead>
            <tr>
              <th>S. NO.</th>
              <th>NAME</th>
              <th>AGE</th>
              <th>ADDRESS</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {this.state.personData.map((Row, idx) => (
              <tr key={Row.id}>
                <td>{idx + 1}</td>
                <td>{Row.name}</td>
                <td>{Row.age}</td>
                <td>{Row.addr}</td>
                <td>
                  {" "}
                  <DropDownButton id={Row.id} />{" "}
                </td>
              </tr>
            ))}
          </tbody>
        </table>

This is the code in the DropDownButton component :-

handleDelete() {
    console.log("ID " + this.props.id);

    fetch("http://localhost/person/" + this.props.id, {
      method: "DELETE",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type"
      }
    })
      .catch(error => console.log("Error:", error))
      .then(response => console.log("Success:", response));
  }
  render() {
    return (
      <React.Fragment>
        <div className="dropdown">
          <button
            type="button"
            className="btn dropdown-toggle dropdownButton"
            data-toggle="dropdown"
          >
            OPTIONS
          </button>
          <div className="dropdown-menu">
            <p className="dropdown-item" onClick={this.handleEdit}>
              EDIT
            </p>
            <p className="dropdown-item" onClick={this.handleDelete}>
              DELETE
            </p>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

Answer 1

I have a problem that may be related to what is discussed in this thread. After adding or editing a column I am changing the color of the cells, but when I delete a row even though the state has changed the the cell colors remain intact until I change the pagination.

Edited

Following stackOverflow's behavioral steps, create a separate thread to address the problem. In case someone has the same problem you can see the solution to the problem in this thread.

Answer 2

In your parent component you need to make a callback method that will remove the data from this.state.personData like the method I wrote below

onDelete = (id) => {
  this.setState({
    ...this.state,
    personData: this.state.personData.filter((row) => row.id !== id)
  });
}

render = () => {
  return (
    <table className="table">
      <thead>
        <tr>
          <th>S. NO.</th>
          <th>NAME</th>
          <th>AGE</th>
          <th>ADDRESS</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {this.state.personData.map((Row, idx) => (
          <tr key={Row.id}>
            <td>{idx + 1}</td>
            <td>{Row.name}</td>
            <td>{Row.age}</td>
            <td>{Row.addr}</td>
            <td>
              {" "}
              <DropDownButton id={Row.id} onDelete={this.onDelete} />{" "}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

And then in your DropDownButton you need to call this onDelete callback

handleDelete () {
  console.log("ID " + this.props.id);

  fetch("http://localhost/person/" + this.props.id, {
    method: "DELETE",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type"
    }
  })
    .catch(error => console.log("Error:", error))
    .then(response => {
      // call the passed in onDelete method here with the cooresponding id
      this.props.onDelete(this.props.id);
      console.log("Success:", response)
    });
}
render () {
  // ...
}

when this onDelete callback is called, the state in the parent component will change, causing it to rerender the list with only the items in the new list