ReactJS How to call a function that opens a simple modal? - reactjs

Question

My problem might be more related to js syntax, but the thing is, in material-ui we receive the js code for the Modal function, so how, from another file, does one calls the modal to be opened on a button click (in this case it onRowClicked in a table)
The Modal.js file with relevant code is:
export default function TransitionsModal() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
The MainTable.js code with the relevant code is:
const openPopup = rowData => {
console.log(rowData.EBELN);
TransitionsModal().setOpen(true); <---- Trying to call the Modal and open it
}
const MainTable = props => {
return (
<div className="col-md-12">
<div className="feed-toggle">
<ul className="nav nav-pills outline-active">
</ul>
</div>
<MaterialTable
columns = {columnsSetup}
options = {{ NOT_RELATED }}
onRowClick={(event, rowData) => openPopup(rowData)} -> calls Open Popup
data={query => NOT_RELATED
});
})
})
}
/>
</div>
);
};

Answer 1

I think that you can try to control the TransitionModal from your MainList component :
const MainTable = props => {
const [showModal , setModal] = useState;
const handleModal = status => {
setModal(status);
}
return (
<div className="col-md-12">
<TransitionsModal
showModal={showModal}
handleModal={ handleModal }
/>
<div className="feed-toggle">
<ul className="nav nav-pills outline-active">
</ul>
</div>
<MaterialTable
columns = {columnsSetup}
options = {{ NOT_RELATED }}
onRowClick={(event, rowData) => openPopup(rowData)} -> calls Open Popup
data={query => NOT_RELATED
});
})
})
}
/>
</div>
);
};
And in your TransitionModal component you just have to pass the prop to control if it will show or not 'showModal' and the method that will allow it to close it handleModal, check that ive made one method that can handle open and close, just by passing the status parameter:
export default function TransitionsModal( { showModal, handleModal } ) {
const classes = useStyles();
return (
<div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={ showModal }
onClose={ () => { handleModal(false) } }
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>