Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

ForgotPassword.tsx

import React, {useState} from 'react'
import FormControl from "@material-ui/core/FormControl";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
import EmailField from "components/Welcome/Fields/EmailField";
import { Link } from '@reach/router';
import { auth } from 'db/index';
export interface ForgetProps {
  handleForget: (forgetVars: { email: string }) => any;
  textFieldVariant?: "outlined" | "filled" | "standard";
  emailValidator?: (value: string) => boolean;
const INITIAL = { text: "", err: "" };
const Forget: React.FC<ForgetProps & NaviProps> = ({
  gobackToSignIn,
  handleForget,
  textFieldVariant = "filled",
  emailValidator = (e) => !!e,
}) => {
  const [email, setEmail] = useState(INITIAL);
   const [emailHasBeenSent, setEmailHasBeenSent] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const handleSubmit = (event: any ,
     email:{ text: string} ) => {
   const { name, value } = event.currentTarget;
           if (name === "userEmail") {
             setEmail(value);
 handleForget = (event: any) => {
        event.preventDefault();
        .sendPasswordResetEmail(email.text)
        .then(() => {
          setEmailHasBeenSent(true);
          setTimeout(() => {setEmailHasBeenSent(false)}, 3000);
        .catch(() => {
        //   setError("Error resetting password");
        console.log('Error resetting password')
  return (
      <IconButton aria-label="go back" onClick={gobackToSignIn}>
        <ArrowBackOutlinedIcon color="action" />
      </IconButton>
      <Box p={2} pb={6}>
        <Typography variant="h6" color="textSecondary" align="center">
          <b>Forget Your Password</b>
        </Typography>
        <EmailField {...{ email, setEmail, textFieldVariant, loading }} />
        <FormControl margin="none" fullWidth>
          <Button
            onClick={handleForget}
            style={{ textTransform: "none" }}
            size="large"
            variant="contained"
            color="primary"
            fullWidth >
            Reset my Password
          </Button>
        </FormControl>
export default Forget;
Error
<Button
            onClick={handleForget}
            style={{ textTransform: "none" }}
            size="large"
            variant="contained"
            color="primary"
            fullWidth >
            Reset my Password
          </Button>
TS2769: 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?: "outlined" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
Type '(forgetVars: { email: string; }) => any' is not assignable to type 'MouseEventHandler'.
Types of parameters 'forgetVars' and 'event' are incompatible.
Property 'email' is missing in type 'MouseEvent<HTMLAnchorElement, MouseEvent>' but required in type '{ email: string; }'.
Overload 2 of 3, '(props: { component: ElementType; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "outlined" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
Property 'component' is missing in type '{ children: string; onClick: (forgetVars: { email: string; }) => any; style: { textTransform: "none"; }; size: "large"; variant: "contained"; color: "primary"; fullWidth: true; }' but required in type '{ component: ElementType; }'.
Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
Type '(forgetVars: { email: string; }) => any' is not assignable to type 'MouseEventHandler'.
Types of parameters 'forgetVars' and 'event' are incompatible.
Property 'email' is missing in type 'MouseEvent<HTMLButtonElement, MouseEvent>' but required in type '{ email: string; }'.
                This message occurs when you use mui or styled component or others like those, just make sure that your attributes match your interfaces in that component.
– Amir
                Sep 14, 2022 at 17:46
From your error:
 Type '(forgetVars: { email: string; }) => any' is not assignable to type 'MouseEventHandler'..
This means you have one definition:
(forgetVars: { email: string }) => any;
However it can't find overloaded function handleForget:
(event: MouseEventHandler => any);
Update: Also if you decide to replace handleForget in the middle of your component (DON'T) - just create a new function
const handleForgetImpl = (event: MouseEventHandler) ...
that you use for other stuff.
According to the error description it seems that there are no properties for the Button type. This may be because you are using an incorrect version of the @types/react-native package. You should consider upgrading the version of this package and verify that the new version has the features you need.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.