Cannot read properties of undefined (reading 'value-domain') in React.Js - reactjs

Question

I am having a problem that I don't know where it cause. Please help me out.
I am developing a stock management platform, it allows users to CRUD products.
When Users are on the product page, they will see a table with edit and delete buttons in every record.
Whenever they click on the delete button, it will show a PopOver to confirm the delete action.
And the error happens when I click "Yes" in the PopOver Component
I am using Material-UI version 4.12.3,
Here is my parent component:
const useStyles = makeStyles((theme) => ({
modal: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
paper: {
backgroundColor: theme.palette.background.paper,
border: "2px solid #000",
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
loading: {
display: "flex",
justifyContent: "center",
},
}));
const useRowStyles = makeStyles({
root: {
"& > *": {
borderBottom: "100%",
},
},
});
function createData(id, name, supplier, type, unit, quantity, cost, price, ingredients, action) {
return {
id,
name,
supplier,
type,
unit,
quantity,
cost,
price,
ingredients,
action,
};
}
function Row(props) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const classes = useRowStyles();
const isCocktail = (type) => {
if (type === "Cocktail" || type === "Mocktail") {
return true;
} else {
return false;
}
};
return (
<React.Fragment>
<TableRow className={classes.root}>
<TableCell>
{isCocktail(row.type) ? (
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
) : null}
</TableCell>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="middle">{row.name}</TableCell>
<TableCell align="middle">{row.supplier}</TableCell>
<TableCell align="middle">{row.type}</TableCell>
<TableCell align="middle">{row.unit}</TableCell>
<TableCell align="middle">{row.quantity}</TableCell>
<TableCell align="middle">{row.cost}</TableCell>
<TableCell align="middle">{row.price}</TableCell>
<TableCell align="middle">{row.action}</TableCell>
</TableRow>
<TableRow></TableRow>
</React.Fragment>
);
}
function Ingredients({ controller }) {
const classes = useStyles();
const dispatch = useDispatch();
const loading = useSelector((state) => state.product.loading);
const listProducts = useSelector((state) => state?.product?.products?.products);
const role = useSelector((state) => state.auth.user.role);
const [open, setOpen] = React.useState(false);
const nonCocktailList = listProducts?.filter((e) => e.type !== "Cocktail");
const nonMocktailList = nonCocktailList?.filter((e) => e.type !== "Mocktail");
const nonFoodList = nonMocktailList?.filter((e) => e.type !== "Food");
const handleOpen = async (id) => {
await dispatch(productActions.getSingleProduct(id));
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
let vietNamD = Intl.NumberFormat("vi-VI");
let rows = nonFoodList?.map((product, index) => {
return createData(
index,
product?.name,
product?.supplier,
product?.unit,
`${product?.capacity + " " + product?.capacityUnit}`,
`${vietNamD.format(product?.cost)} đ`,
`${product?.quantity + " " + product?.unit}`,
<div className="actions">
<Button variant="contained" style={{ backgroundColor: "#2EC0FF", color: "white" }} onClick={() => handleOpen(product?._id)}>
<EditOutlinedIcon style={{ color: "white" }} />
</Button>
<PopOver id={product._id} role={role} controller={controller} />
</div>
);
});
useEffect(() => {
dispatch(supplierActions.getSuppliers());
}, [dispatch]);
return loading ? (
<div className={classes.loading}>
{" "}
<CircularProgress />
</div>
) : (
<div className="create-button">
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<CreateUpdateIngredient handleClose={handleClose} controller={controller} />
</Fade>
</Modal>
<IngredientModal controller={controller} />
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead style={{ backgroundColor: "black", width: "100%" }}>
<TableRow>
<TableCell />
<TableCell style={{ color: "white" }}>Index</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Name
</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Supplier
</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Unit
</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Unit Capacity
</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Cost
</TableCell>
<TableCell style={{ color: "white" }} align="middle">
Daily Quantity Needed
</TableCell>
<TableCell
style={{
color: "white",
display: "flex",
justifyContent: "center",
}}
align="middle"
>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows?.map((row) => (
<Row key={row.id} row={row} />
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}
export default React.memo(Ingredients);
And this is the PopOver:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Popover from "#material-ui/core/Popover";
import Typography from "#material-ui/core/Typography";
import { Button, IconButton } from "#material-ui/core";
import DeleteOutlineOutlinedIcon from "#material-ui/icons/DeleteOutlineOutlined";
import { useDispatch } from "react-redux";
import { productActions } from "redux/actions";
const useStyles = makeStyles((theme) => ({
typography: {
padding: theme.spacing(2),
},
}));
export default function PopOver(props) {
const { controller, id, role } = props;
const classes = useStyles();
const dispatch = useDispatch();
const [anchorEl, setAnchorEl] = React.useState(null);
const deleteProduct = (id) => {
if (!id) return;
dispatch(productActions.deleteProduct(id));
dispatch(productActions.getProducts(controller));
handleClose();
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const productId = open ? "simple-popover" : undefined;
return (
<div>
<Button aria-describedby={id} style={{ backgroundColor: "#FF4D4F", height: "40px", width: "20px" }} variant="contained" onClick={handleClick} disabled={role !== "Admin"}>
<IconButton aria-label="delete" color="secondary">
<DeleteOutlineOutlinedIcon style={{ color: "white" }} />
</IconButton>
</Button>
<Popover
id={productId}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<Typography className={classes.typography}>
Do you want to delete this ingredient?
<Button
color="primary"
onClick={() => {
deleteProduct(id);
}}
>
Yes
</Button>
<Button color="secondary" onClick={handleClose}>
No
</Button>
</Typography>
</Popover>
</div>
);
}
These are the two actions that called when a record is deleted
const getProducts =
({ date, mode }) =>
async (dispatch) => {
const body = { date, mode };
dispatch({ type: types.GET_PRODUCTS_REQUEST, payload: null });
try {
const res = await api.post("/products", body);
dispatch({ type: types.GET_PRODUCTS_SUCCESS, payload: res.data.data });
} catch (error) {
toast.error("Get Product List Failed");
dispatch({ type: types.GET_PRODUCTS_FAILURE, payload: error });
}
};
const deleteProduct = (id) => async (dispatch) => {
dispatch({ type: types.DELETE_PRODUCT_REQUEST, payload: null });
try {
const res = await api.delete(`/products/${id}`);
dispatch({ type: types.DELETE_PRODUCT_SUCCESS, payload: res.data.data });
toast.success("Delete Product Success");
} catch (error) {
toast.error("Delete Product Fail");
dispatch({ type: types.DELETE_PRODUCT_FAILURE, payload: error });
}
};