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

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>
  );
}

CodePudding user response：

You just need to do that:

<Button onClick={() => onClose()} color='primary'>
  Close
</Button>

It's to avoid passing event props on onClose because your props not accept that event.

And remove your useless value parameters:

  const handleClose = () => {
    setOpen(false);
  };

CodePudding user response：

From the