I am facing an issue trying to delete rows on a reactTable, i'm totally newbie with the library, I have a table with a trash button on each row. The expected behavior is to click on the trash, the state update removing this row element and the table refresh without the deleted row.
Currently, when i update the state, i don't know why, it coming back to it's initial value, an empty array.
I did a minimalist example of my problem on this codeSandbox: https://codesandbox.io/embed/currying-rain-w9z83?fontsize=14&hidenavigation=1&theme=dark
App.js contain the parent element who fetch the data and create columns definition, then pass it to child element. The Child element just build the table.
When you will hit the trash button, the method to delete the row will be called but the state will go back to it's initial value: an empty array.
I've tried few things from now, like disabling the auto update of the react-table, passing the methods as props and making the column definitions in Table component referencing the function passed as props.
I tried also to make a button who call the same method outside of the reactTable and i didn't faced the problem, like the state wasn't reseted, so i'm sure the problem is coming from the ReactTable i don't know maybe internal hooks or something.
So, for the moment i'm completly stuck, totally out of idea.
Thanks in advance for your help and your time.
setState is async so you need to use the function version here. This is true whenever you need to create the new state based on the value of the previous state.
Also, I removed the useMemo hook and fixed the linter errors.
Don't dismiss the exhaustive-deps linter rule so simply. It's almost always correct.
By the way, answering something that you didn't ask, if you have state that changes based on another piece of state, strongly consider using useReducer instead of useState.
import "./styles.css";
import React, { useState, useEffect } from "react";
import Table from "./table";
/*eslint-disable no-self-compare*/
export default function Patients() {
const [patients, setPatients] = useState([]);
function handlePatientRowDelete(row) {
setPatients((prev) =>
patients.filter((item) => item.id !== row.original.id)
);
}
useEffect(() => {
setPatients([
{
id: 1,
fullname: "Jeanne",
diagnostic: "check"
},
{
id: 2,
fullname: "Bernard",
diagnostic: "check2"
},
{
id: 3,
fullname: "Jacquot",
diagnostic: "check3"
}
]);
}, []);
const columns = [
{
Header: "Actions",
id: "expander",
Cell: ({ row }) => (
<span className="action-icons">
<span {...row.getToggleRowExpandedProps()}>
{row.isExpanded ? (
<i className="bi bi-chevron-down"></i>
) : (
<i className="bi bi-chevron-right"></i>
)}
</span>
<span>
<i
className="bi bi-trash-fill"
onClick={() => handlePatientRowDelete(row)}
></i>
</span>
</span>
)
},
{
Header: "Nom complet",
accessor: "fullname"
},
{
Header: "Diagnostic",
accessor: "diagnostic"
}
];
return (
<div className="container content-table">
<Table data={patients} columns={columns} />
</div>
);
}