Putting two functions in the same "onclick" - reactjs

Question

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;

Answer 1

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));
}}

Answer 2

When you call the function you need to use ()
onClick={(ev) => {
ev.stopPropagation();
handleClick();
dispatch(approveUser(row.original.id));
}}