#Button component

4 messages · Page 1 of 1 (latest)

tardy hedge
#

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>

rugged portal
tardy hedge
#

how do I destructure? I'm not sure what that means 😅

rugged portal