The idea is that pressing a cell in my DataGrid will trigger a Dialog . Although it fires and is displayed, it cannot be removed.
DataGrid.tsx :
export default function Data(props: any) {
const { columns, rows } = props;
const [dialogOpen, setDialogOpen] = React.useState(false);
const handleDialogOpen = () => setDialogOpen(true);
const handleValue = (e: any): void => {
if (e) {
console.log(e.row);
}
};
return (
<Stack direction="row" className="Container">
<div style={{ height: 400, width: '84%', cursor: 'pointer' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
onCellClick={(e: any) => {
handleValue(e);
handleDialogOpen();
}}
/>
</div>
<Dialog open={dialogOpen} onClose={handleDialogOpen} />
</Stack>
);
}
Dialog.tsx :
export default function AlertDialogSlide(props: any) {
const { open, onClose } = props;
return (
<div>
<Dialog
open={open}
onClose={onClose}
TransitionComponent={Transition}
keepMounted
aria-describedby="alert-dialog-slide-description"
>
<DialogTitle>Use Google location service?</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-slide-description">
Error
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Close</Button>
</DialogActions>
</Dialog>
</div>
);
}
The only thing that I am not being able to do is that the Dialog Button closes the pop up.
I think you need to use useEffect(). Use the change of the active variable to affect the behavior you expect.
https://reactjs.org/docs/hooks-effect.html
useEffect( () => {
if (dialogOpen) { … }
}, [dialogOpen]);