React spread operator inside a table data

Question

I am creating a data table, fetching data from Redux store, and setting up this Redux's raw data into a useState hook named rowsData, setRowsData for data table rows, The data from redux is array of objects.

I then set the rowsData into a new [data, setData] useState because of some additional data, like meta information for pagination.

useEffect(() => {
    const rawRows =
      users.allUsers &&
      users.allUsers.data.map((user) => {
        return {
          name: (
            <Link
              to={`/users/profile/view/${user.secondaryId}`}
              className="d-flex justify-content-start align-items-center"
            >
              <div className="me-3">
                <AvatarWord initial={user.name[0]} />
              </div>
              <h5 className="text-primary mt-2"> {user.name}</h5>
            </Link>
          ),
          primaryRole: primaryRoleBackground(
            user.primary_role
              ? user.primary_role.name[0].toUpperCase() +
                  user.primary_role.name.slice(1)
              : ""
          ),
          // primary_role: primaryRoleBackground(user.primary_role),
          id: user.id,
          email: user.email,
          status: <div>{userStatus(user.status, user.id)}</div>,

Here I am adjusting it according to data table. The last line ````Status: ``` has a function to discriminate the active and inactive users with a button to activate or deactivate them.

const userStatus = (status, id) => {
    switch (status) {
      case "0":
        return (
          <>
            <span className="legend-indicator bg-danger text-dark"></span>
            Inactive
            <Link
              to="#!"
              type="button"
              className="btn badge bg-success ms-2"
              onClick={() => userActivator(id)}
            >
              Activate
            </Link>
          </>
        );
      case "1":
        return (
          <>
            <span className="legend-indicator bg-success text-dark"></span>
            Active
            <Link
              to="#!"
              type="button"
              className="btn badge bg-danger ms-2"
              onClick={() => userDeactivator(id)}
            >
              Deactivate
            </Link>
          </>
        );
      default:
        return;
    }
  };

Here is the output of the codes above.

now when I click on deactivate I use the following code to update the data.

const userDeactivator = (id) => {
    // deactivateUser(id);
    console.log(rowsData.length);
    for (let i = 0; i === dataLength; i++) {
      const res = rowsData[i].id === id;
      setRowsData([
        ...rowsData,
        {
          ...res,
          status: (
            <div>
              <>
                <span className="legend-indicator bg-danger text-dark"></span>
                Inactive
                <Link
                  to="#!"
                  type="button"
                  className="btn badge bg-success ms-2"
                  onClick={() => userActivator(res.id)}
                >
                  Activate
                </Link>
              </>
            </div>
          ),
        },
      ]);
    }
  };

I sure sends the API call to deactivate the user, but I have to update the data status in runtime. What I am missing I cannot figure out.

Answer 1

In useEffect hook you have to pass the argument of status like this:

useEffect(() => {
  return () => {
   // Your Code
  }
}, [status])

This would tell the useEffect that whenever the status changes you have to re-render the state for it.