import { ReactElement , useState } from 'react' ; import QRCode from 'qrcode.react' ; import { IconButton , Dialog , DialogTitle } from '@material-ui/core' ; import { FilterCenterFocusSharp } from '@material-ui/icons' ; interface Props { value : string ; label : string ; } export default function QRCodeModal ( props ) { const [ open , setOpen ] = useState ( false ) ; const handleOpen = ( ) => { setOpen ( true ) ; } ; const handleClose = ( ) => { setOpen ( false ) ; } ; return ( < div > < IconButton color = "primary" size = "small" onClick = { handleOpen } > < FilterCenterFocusSharp /> < /IconButton> < Dialog onClose = { handleClose } aria - labelledby = "simple-dialog-title" open = { open } > < div style = { { padding : '30px' , textAlign : 'center' } } > < DialogTitle id = "simple-dialog-title" > { props . label } < /DialogTitle> < QRCode value = { props . value } size = { 150 } bgColor = { '#ffffff' } fgColor = { '#000000' } level = { 'L' } includeMargin = { false } renderAs = { 'svg' } / > < /div> < /Dialog> < /div>); }