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.

Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'

TS newbie here. I'm getting this error on the 'handleClick' property of my <TailwindButton /> in SignUpForm.tsx :

Type '(e: React.MouseEventHandler) => void' is not assignable to type 'MouseEventHandler'. Types of parameters 'e' and 'event' are incompatible. Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type 'MouseEventHandler'. Type 'MouseEvent<HTMLButtonElement, MouseEvent>' provides no match for the signature '(event: MouseEvent<HTMLButtonElement, MouseEvent>): void'

I'm using VSCode and I moused over onClick to get the correct type but I'm still getting the error. I've tried using <Element> instead of <HTMLButtonElement> type as suggested here and I still get the error. Please help

TailwindButton.tsx:

import React from 'react'
interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} 
            <p>{text}</p>
                <img src={icon} alt="forward_icon" />
        </button>
export default TailwindButton
SignUpForm.tsx:
import React, { useState } from 'react'
import profileIcon from '../images/icons/profile.svg'
import forwardIcon from '../images/icons/forward.svg'
import TailwindInput from './TailwindInput'
import TailwindButton from './TailwindButton'
const SignUpForm: React.FC = () => {
    const [values, setValues] = useState<{ username: string; password: string }>({
        username: '',
        password: ''
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValues(prev => ({
            ...prev,
            [e.target.name]: e.target.value
    const handleClick = (e: React.MouseEventHandler<HTMLButtonElement>) => {
    return (
                <TailwindInput
                    startIcon={profileIcon}
                    endIcon=""
                    placeholder="Username"
                    type="text"
                    value={values.username}
                    name="username"
                    onChange={(e) => handleChange(e)}
            <div className='flex justify-end'>
                <p className='h-10 w-1/2 md:w-1/3'>
                    <TailwindButton
                        icon={forwardIcon}
                        text="Next"
                        handleClick={(e: React.MouseEventHandler<HTMLButtonElement>) => handleClick(e)} //error is here
        </form>
export default SignUpForm
Try the below change on the onClick event types:
 onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)}
Full code:
import React from 'react'
interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} //error is here
            <p>{text}</p>
                <img src={icon} alt="forward_icon" />
        </button>
export default TailwindButton
                I tried the fix you suggested but the error is now on the instance of the button component I'm using in my form. I've updated the code in the question to reflect it. Thanks.
– Abaga
                Mar 22, 2022 at 12:49
        
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.