I have a datatable implementation as followings.
<MaterialTable
icons={tableIcons}
title={title}
columns={columns}
data={data}
actions={[
{
icon: () => <Edit />,
tooltip: 'Edit',
onClick: (event, rowData) => {
}
},
{
icon: () => <Delete />,
tooltip: 'Delete',
onClick: (event, rowData) => {
return <DeletePrompt button_click="1" /> // <-- this is where I need to call the modal
}
}
]}
options={{
actionsColumnIndex: -1,
exportButton: true,
headerStyle: {
fontWeight: "bold"
}
}}
/>
However, I need to make use of the following modal to implement Delete actions.
DeletePrompt.jsx
export default function DeletePrompt(props) {
const content = props.content;
const data_id = props.data_id;
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
if(props.button_click === 1){
handleClickOpen()
}
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Are you sure to Delete?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{ content }
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
}
I know that invoking the handleClickOpen() method would have worked in this case. But for some reason it doesn't appear to work. Any guess on what I am missing over here.
Instead of rendering the modal on the button click in the onClick method of Delete icon, you should set a dialog boolean and also a state variable to hold the data of the selected row data.
const [open, setOpen] = React.useState(false);
const [selectedItem, setSelectedItem] = React.useState({});
in your onClick, you can update the code to below to trigger the boolean flag for the modal and also store the row data in the selectedItem state to use in the delete modal.
...
{
icon: () => <Delete />,
tooltip: 'Delete',
onClick: (event, rowData) => {
setSelectedItem(rowData)
setOpen(true)
}
}
...
Than you can conditionally render the deletePrompt in the same component by using the open prop
{open ?
<DeletePrompt
open={open}
handleClose(() => { // reset on close
setOpen(false)
setSelectedItem({})
})
content={selectedItem}
.... // other props
/> : null}
Finally, update your DeletePrompt component to remove the open state from there and use the props.
export default function DeletePrompt(props) {
const { content, open, handleClose } = props; // assignment
const data_id = props.data_id;
// const [open, setOpen] = React.useState(false);
// const handleClickOpen = () => {
// setOpen(true);
// };
// const handleClose = () => {
// setOpen(false);
// };
// if(props.button_click === 1){
// handleClickOpen()
// }
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Are you sure to Delete?"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{ content } // make sure, this is not an object. If its an object use some property of it.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</div>
);
}