[SOLVED] Button Event Type Error in React Typescript

Issue

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
            p-2
        '
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} 
        >
            <p>{text}</p>
            <p>
                <img src={icon} alt="forward_icon" />
            </p>
        </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 (
        <form>
            <div>
                <TailwindInput
                    startIcon={profileIcon}
                    endIcon=""
                    placeholder="Username"
                    type="text"
                    value={values.username}
                    name="username"
                    onChange={(e) => handleChange(e)}
                />
            </div>

            <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
                    />
                </p>
            </div>
        </form>
    )
}

export default SignUpForm

Solution

e is of type React.MouseEvent<HTMLButtonElement, MouseEvent> here:

(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)

And you’re passing it to handleClick, which expects an argument of type React.MouseEventHandler<HTMLButtonElement>:

const handleClick = (e: React.MouseEventHandler<HTMLButtonElement>) => { }

As the error states, these are two different types. If e is indeed the event type and not the handler type (which sounds more likely), update the declaration for handleClick to match:

const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { }

Answered By – David

Answer Checked By – Pedro (BugsFixing Volunteer)