Button Event Type Error in React Typescript

Question

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

David · Accepted Answer · 2022-03-22 13:34:27Z

4

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 Mar 22, 2022 at 13:34

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nicolas ayala · Accepted Answer · 2022-03-22 13:39:50Z

1

Your Issue is the type of the function should be "React.MouseEventHandler" but you type the params with it.

Example:

const handleClick: React.MouseEventHandler<HTMLButtonElement> = 
(event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log('Submit button clicked!');
};

And you can use like this:

<TailwindButton
 icon={forwardIcon}
 text="Next"
 handleClick={handleClick}
/>

answered Mar 22, 2022 at 13:39

nicolas ayala

211 silver badge2 bronze badges

Comments

Juraj Kocan · Accepted Answer · 2022-03-22 13:35:26Z

-1

mouseEventHandler is type of "onClick", whole function. parameter is type of "React.MouseEvent<HTMLButtonElement, MouseEvent>"

this mouseEventHandler can looks somethink like

type MouseEventHandler = (event: MouseEvent<HTMLButtonElement, MouseEvent>) => void;

answered Mar 22, 2022 at 13:35

Juraj Kocan

2,8981 gold badge19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Button Event Type Error in React Typescript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related