[FIXED] React-Table not updating to data change

Issue

This is more of an issue with how I'm doing my fetch and I understand that, it's just that this is specifically happening with react table. I have the following code which saves new data, then changes the state of a boolean which then triggers a re-fetch ultimately updating the data which my React-Table looks at (or should), then it should cause a re-render of React-Table which should then display the new update... However, it doesn't do this.

const [triggerFetch, setTriggerFetch] = useState(false);

const columns = useMemo(() => [
    { Header: "Job Name", accessor: "jobName", width: 100 },
    { Header: "Outgoing Date and Time", accessor: "outgoingDateTime", width: 50 },
    { Header: "Returning Date and Time", accessor: "returningDateTime", width: 50 },
    { Header: "Job Type", accessor:"jobType", width: 50 },
    { Header: "Delivery Location", accessor: "deliveryLocation", width: 50 },
])

const [tableJobs, setTableJobs] = useState([]);

useEffect(() => {
    fetch(TABLE_JOBS_URL, {
        method: "GET",
        headers: {"Authorization": sessionStorage.getItem("accessToken")}
    })
    .then((response) => response.json())
    .then((responseData) => {
        setTableJobs(responseData);
    })
    .catch((error) => console.error(error));

    setTriggerFetch(false);
}, [triggerFetch])

const saveJob = () => {
    ...

    setTriggerFetch(true)
}

return(
    ...
    <BaseTable columns={columns} data={tableJobs} />
    ...
)

My question is, how do I get a re-render of React-Table to reflect the new data which would have been added and fetched?

Solution

Your code can be greatly simplified by entirely removing triggerFetch. Unless there is something I'm missing, there's no reason for it, you can just use a function.

const columns = useMemo(() => [
    { Header: "Job Name", accessor: "jobName", width: 100 },
    { Header: "Outgoing Date and Time", accessor: "outgoingDateTime", width: 50 },
    { Header: "Returning Date and Time", accessor: "returningDateTime", width: 50 },
    { Header: "Job Type", accessor:"jobType", width: 50 },
    { Header: "Delivery Location", accessor: "deliveryLocation", width: 50 },
])

const [tableJobs, setTableJobs] = useState([]);

function fetchTableJobs() {
    fetch(TABLE_JOBS_URL, {
        method: "GET",
        headers: {"Authorization": sessionStorage.getItem("accessToken")}
    })
    .then((response) => response.json())
    .then((responseData) => {
        setTableJobs(responseData);
    })
    .catch((error) => console.error(error));
}

const saveJob = () => {
    ...

    fetchTableJobs()
}

return(
    ...
    <BaseTable columns={columns} data={tableJobs} />
    ...
)

Basically you just kick of fetchTableJobs whenever you need, and in the background it'll run and then set the state when it's finished.

You could also make fetchTableJobs an async function so you can use await within it, I personally find that a lot easier then chaining .then calls, but that's a matter of preference.

I'm not sure what exactly was causing the bug you saw, but simplifying the code will likely make the bug surface. If you have questions after simplifying, or if there is some purpose for triggerFetch because of code that wasn't included, feel free to comment on this answer and I'll try to help later.

Answered By - Nathan
Answer Checked By - Mildred Charles (JavaFixing Admin)