Material UI: dialog with Groupbutton - reactjs

Question

I have this file and I'm trying to have a "group batten", and when I click on it, I have a list with ["Confirm Review", "Reject Invoice", "Assign to User"] and I want when I press "Confirm Review" to show me a Dialog, how can I solve this problem?
And this is a file that contains the part of groupButton
import React from "react";
import Grid from "#material-ui/core/Grid";
import Button from "#material-ui/core/Button";
import ButtonGroup from "#material-ui/core/ButtonGroup";
import ArrowDropDownIcon from "#material-ui/icons/ArrowDropDown";
import ClickAwayListener from "#material-ui/core/ClickAwayListener";
import Grow from "#material-ui/core/Grow";
import Paper from "#material-ui/core/Paper";
import Popper from "#material-ui/core/Popper";
import MenuItem from "#material-ui/core/MenuItem";
import MenuList from "#material-ui/core/MenuList";
const options = ["Confirm Review", "Reject Invoice", "Assign to User"];
export default function SplitButton() {
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleClick = () => {
console.info(`You clicked ${options[selectedIndex]}`);
};
const handleMenuItemClick = (event, index) => {
setSelectedIndex(index);
setOpen(false);
};
const handleToggle = () => {
setOpen((prevOpen) => !prevOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
return (
<Grid container direction="column" alignItems="center">
<Grid item xs={12}>
<ButtonGroup
variant="contained"
color="primary"
ref={anchorRef}
aria-label="split button"
>
<Button
style={{
paddingLeft: "2.4rem",
paddinRight: "2.4rem",
paddingTop: "1.5rem",
paddingBottom: "1.5rem",
// backgroundColor: "#d82c2c",
// color: "#FFFFFF",
borderRadius: 4,
}}
onClick={handleClick}
>
{options[selectedIndex] || "Action"}{" "}
</Button>
<Button
color="primary"
size="small"
aria-controls={open ? "split-button-menu" : undefined}
aria-expanded={open ? "true" : undefined}
aria-label="select merge strategy"
aria-haspopup="menu"
onClick={handleToggle}
style={{
paddingTop: "1.5rem",
paddingBottom: "1.5rem",
// backgroundColor: "#d82c2c",
// color: "#FFFFFF",
borderRadius: 4,
}}
>
<ArrowDropDownIcon />
</Button>
</ButtonGroup>
<Popper
open={open}
anchorEl={anchorRef.current}
role={undefined}
transition
disablePortal
>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom",
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList id="split-button-menu">
{options.map((option, index) => (
<MenuItem
key={option}
disabled={index === 2}
selected={index === selectedIndex}
onClick={(event) => handleMenuItemClick(event, index)}
>
{option}
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Grid>
</Grid>
);
}

Answer 1

First, is that MUI v4?
Also, why use style prop when sx (v5) and makeStyle (v4) are a thing.
A high-level overview of what you want, minus all those decorative styles and props.
import { Fragment, useState } from "react";
import { ButtonGroup, Button, Dialog, DialogContent } from "#mui/material";
const ButtonGroupWithDialog = () => {
const [dialogOpen, setDialogOpen] = useState(false);
const handleDialogOpen = () => setDialogOpen(true);
const handleDialogClose = () => setDialogOpen(false);
return (
<Fragment>
<ButtonGroup>
<Button onClick={handleDialogOpen}>Confirm Review</Button>
<Button>Reject Invoice</Button>
<Button>Assign to User</Button>
</ButtonGroup>
<Dialog open={dialogOpen} onClose={handleDialogClose}>
<DialogContent>
{/* content here */}
</DialogContent>
</Dialog>
</Fragment>
);
};