MUI Dialog - Can't pass onClose to onClick inside dialog actions

Question

I'm trying to create a reusable Dialog component based on MUI dialog.

Here is my code:

import React from 'react';
import {
  Dialog as MuiDialog,
  DialogProps,
  Button,
  DialogContent,
  DialogActions,
  DialogTitle,
} from '@material-ui/core';

const Dialog = ({ title, open, onClose, children, ...props }: DialogProps) => {

  return (
    <MuiDialog
      onClose={onClose}
      aria-labelledby='simple-dialog-title'
      open={open}
    >
      <DialogTitle id='simple-dialog-title'>{title}</DialogTitle>
      <DialogContent>{children}</DialogContent>
      <DialogActions>
        <Button onClick={onClose} color='primary'>
          Close
        </Button>
      </DialogActions>
    </MuiDialog>
  );
};

It keeps showing an error at <Button onClick={onClose} color='primary'>

The error:

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; disableFocusRipple?: boolean | undefined; ... 5 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined' is not assignable to type 'MouseEventHandler<HTMLAnchorElement> | undefined'.
      Type '(event: {}, reason: "backdropClick" | "escapeKeyDown") => void' is not assignable to type 'MouseEventHandler<HTMLAnchorElement>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ children: string; onClick: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined; color: "primary"; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined' is not assignable to type 'MouseEventHandler<HTMLButtonElement> | undefined'.
      Type '(event: {}, reason: "backdropClick" | "escapeKeyDown") => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.  TS2769

    22 |       <DialogContent>{children}</DialogContent>
    23 |       <DialogActions>
  > 24 |         <Button onClick={onClose} color='primary'>
       |         ^
    25 |           Close
    26 |         </Button>
    27 |       </DialogActions>

And here I use the Dialog

const SimpleDialogDemo = () => {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value: string) => {
    setOpen(false);
  };

  return (
    <div>
      <br />
      <Button variant='outlined' color='primary' onClick={handleClickOpen}>
        Open simple dialog
      </Button>
      <Dialog open={open} onClose={handleClose} children={<div>Test</div>} />
    </div>
  );
}

Answer 1

From the docs, this is the signature of onClose prop from Dialog:

(event: object, reason: string) => void

This is the onClick callback signature from the Button:

(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void

The problem here is you're passing a function with the first argument as a string which causes the type error in the Button. Judging from your handleClose function definition, it looks like you want to receive a close reason, you can do that by extending the DialogProps type:

import {
  Dialog as MuiDialog,
  DialogProps as MuiDialogProps
} from '@material-ui/core';

type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';

interface DialogProps extends MuiDialogProps {
  onClose: (reason: CloseReason) => void;
}

Then update the handleClose parameter type:

const handleClose = (value: CloseReason) => {
  setOpen(false);
};

And pass it down like this in the Dialog and Button:

<MuiDialog onClose={(_, reason) => onClose(reason)}

<Button onClick={() => onClose('closeButtonClick')}