I'm trying to display a group of users in a table, and I'm using a library called "ReactTable", and I have an "approve" button, when the user clicks on the "approve" button two things should happen:

The first will be a dispatch of the approveUser function

The second thing, a message will appear that "acceptance has been completed".

The problem is that I want to put two functions in the same button and the same "onClick", and when I did that the site was no longer working,

How can I solve the problem?

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const useStyles = makeStyles({
  button1: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#43a047",
      color: "#e8e4e4",
      transition: "0.3s",
      borderColor: "#43a047",
    },
  },
  button2: {
    backgroundColor: "none",
    "&:hover": {
      backgroundColor: "#e53935",
      color: "#e8e4e4",
      transition: "0.3s",
      borderColor: "#e53935",
    },
  },
});

function ContactsList(props) {
  const classes = useStyles();
  const dispatch = useDispatch();
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }

    setOpen(false);
  };

  useEffect(() => {
    dispatch(getUsersRequests());
  }, [dispatch]);

  const usersRequestsState = useSelector(
    (state) => state.usersRequestsApp["usersRequests"]
  );

  console.log(
    "requests inside Contacts List: ",
    usersRequestsState["usersRequests"]
  );

  const columns = useMemo(
    () => [
      {
        Header: "",
        // this is function or property
        accessor: "avatar",
        Cell: ({ row }) => {
          return (
            <Avatar
              className="mx-8"
              alt={row.original.name}
              src={row.original.avatar}
              style={{ height: "7rem", width: "7rem" }}
            />
          );
        },
        className: "justify-center",
        width: 64,
        sortable: false,
      },
      {
        Header: "First Name",
        accessor: "firstName",
        className: "font-medium",
        sortable: true,
      },
      {
        Header: "Last Name",
        accessor: "lastName",
        className: "font-medium",
        sortable: true,
      },
      {
        Header: "Email",
        accessor: "email",
        sortable: true,
      },
      {
        Header: "Phone Number",
        accessor: "phoneNumber",
        sortable: true,
      },
      {
        Header: "actions",
        accessor: "",
        sortable: true,
        id: "action",
        // width: 100,
        Cell: ({ row }) => (
          <div className="flex items-center">
            <ButtonGroup
              style={{
                maxWidth: "206px",
                maxHeight: "40px",
                minWidth: "206px",
                minHeight: "40px",
              }}
              aria-label="outlined primary button group"
            >
              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick;
                  dispatch(approveUser(row.original.id));
                }}
                className={classes.button1}
              >
                approve
              </Button>

              <Snackbar
                open={open}
                autoHideDuration={6000}
                onClose={handleClose}
              >
                <Alert onClose={handleClose} severity="success">
                  acceptance has been completed!
                </Alert>
              </Snackbar>

              <Button
                style={{
                  maxWidth: "100px",
                  minWidth: "100px",
                }}
                onClick={(ev) => {
                  ev.stopPropagation();
                  dispatch(rejectUser(row.original.id));
                }}
                className={classes.button2}
              >
                reject
              </Button>
            </ButtonGroup>
          </div>
        ),
      },
    ],
    []
  );

  const dataResponse = useMemo(() => usersRequestsState["data"]);

  console.log("dataResponse: ", dataResponse);

  return (
    <motion.div
      initial={{ y: 20, opacity: 0 }}
      animate={{ y: 0, opacity: 1, transition: { delay: 0.2 } }}
    >
      <ContactsTable columns={columns} data={dataResponse} />
    </motion.div>
  );
}

export default ContactsList;

CodePudding user response：

There is no use of just putting a function reference and not using it

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick;
                  dispatch(approveUser(row.original.id));
                }}

You should invoke the function by putting () at the end of the handleClick as:

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick(ev);    // INVOCATION
                  dispatch(approveUser(row.original.id));
                }}

This is just personal preference

You are handling onClick inline and trying to invoke the function handleClick, so It would be much cleaner if you could just set the state of Open inside the handler.

setOpen(true);

Below code is much more readable

onClick={(ev) => {
  ev.stopPropagation();
  setOpen(true);   
  dispatch(approveUser(row.original.id));
}}

CodePudding user response：

When you call the function you need to use ()

   onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick();
                  dispatch(approveUser(row.original.id));
                }}