I have a button component with an onClick but it does nothing. Can someone help me understand why?
//component:
interface Button extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode
className?: string
onClick?: () => void
}
const Button = ({
children,
className,
onClick,
...props
}: Button): JSX.Element => {
return (
<button
className={clsx(
'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded',
className
)}
{...props}
>
{children}
</button>
)
}
export default Button
// signOut is imported from nextauth
//the use :
<Button children={'Sign out'} onClick={() => signOut()} />
//html button that works:
<button onClick={() => signOut()}> Sign out </button>