import React from 'react'; import Button from '@material-ui/core/Button'; import DialogTitle from '@material-ui/core/DialogTitle'; import Dialog from '@material-ui/core/Dialog'; import { DialogContent, DialogContentText } from '@material-ui/core'; interface Props { title: string; helpText: string; } const HelpDialog = ({ helpText, title }: Props) => { const [open, setOpen] = React.useState(false); const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; return ( <div> <Button variant="outlined" color="primary" onClick={handleClickOpen}> INFO </Button> <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > <DialogTitle id="alert-dialog-title">{title}</DialogTitle> <DialogContent> <DialogContentText id="alert-dialog-description" dangerouslySetInnerHTML={{ __html: helpText }} /> </DialogContent> </Dialog> </div> ); }; export default HelpDialog;