Update React table after deleting row - reactjs

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

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

Answer 2

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.