#Typescript event error

14 messages · Page 1 of 1 (latest)

near halo
# 
  Type 'MouseEvent<HTMLAnchorElement, MouseEvent>' provides no match for the signature '(event: MouseEvent<HTMLAnchorElement, MouseEvent>): void'.```

```  onClick?: (event: MouseEventHandler<HTMLAnchorElement>) => void;
};

export const NavLink = ({
  href,
  className,
  children,
  onClick,
  isExact,
}: NavLinkType) => {
  const currentPage = usePathname();

  return (
    <Link
      onClick={(e) => onClick && onClick(e)}``` What am I doing wrong?
sly crane
#

Hey! The error you're encountering is because of a type mismatch in the onClick prop of your NavLink component. The onClick prop expects a function with the type signature (event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void

#

Did you need an exemple 🙂 ?

near halo
#

(please ping me in reply)

sly crane
near halo
#

sure

# 
import classNames from "classnames";
import Link from "next/link";
import { usePathname } from "next/navigation";
import s from "./navbar.module.scss";

type NavLinkType = {
  href: string;
  className: string;
  children: React.ReactNode;
  isExact?: boolean;
  onClick?: (event: MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
};

export const NavLink = ({
  href,
  className,
  children,
  onClick,
  isExact,
}: NavLinkType) => {
  const currentPage = usePathname();

  return (
    <Link
      onClick={onClick}
      href={href}
      className={classNames(className, {
        [s.active]: isExact ? currentPage === href : currentPage.includes(href),
      })}
    >
      {children}
    </Link>
  );
};
sly crane
#

you have used the mouseevent as generic type, for fix thats u just have to use it without typed parameters,

Like :

import classNames from "classnames";
import Link from "next/link";
import { usePathname } from "next/navigation";
import s from "./navbar.module.scss";

type NavLinkType = {
  href: string;
  className: string;
  children: React.ReactNode;
  isExact?: boolean;
  onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
};

export const NavLink = ({
  href,
  className,
  children,
  onClick,
  isExact,
}: NavLinkType) => {
  const currentPage = usePathname();

  return (
    <Link
      onClick={onClick}
      href={href}
      className={classNames(className, {
        [s.active]: isExact ? currentPage === href : currentPage.includes(href),
      })}
    >
      {children}
    </Link>
  );
};
#

I have fixed that : onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;

near halo
#

oh lol

#

thanks!!

#

!close