React typescript onClick event typing

Question

I'm making a React + typescript project. And i have number button which looks like this:

<button className="num" type='button' value={'1'} onClick={inputHandler}>1</button>

You can notice that i also have onClick={inputHandler} on that button:

  const inputHandler = (event: any) => {
   event.preventDefault();
   setInput(prev => prev.replace('_', event.target.value));}

This handler taking a value prop of button and setting it in to the input. So i am stucked on typing event for this handler. Every type i am defining returns:

Property 'value' does not exist on type 'EventTarget'.

If i typing it as "any", obviously it working. But i need to define exact type for it. Help me please.

Chubby Cows · Accepted Answer · 2022-01-29 21:39:25Z

3

Usually I'll type the event argument as a generic Event.

Inside the function I'll make a variable that receives the actual HTML element and then cast the type using the as keyword, because the argument "event" itself is not a HTML element, it is more advisable to make a variable with the target.

  const inputHandler = (event: Event) => {
    event.preventDefault();
    const element = event.target as HTMLButtonElement;
    setInput(prev => prev.replace('_', element.value));
  }

answered Jan 29, 2022 at 21:39

Chubby Cows

6235 silver badges20 bronze badges

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

1 Comment

Diego Benetti Over a year ago

Typescript was yelling at me with Event so I had to change it to MouseEvent. But your suggestion to cast event target with typescript as was just awesome. Thanks :)

Youssouf Oumar · Accepted Answer · 2023-09-25 07:46:21Z

2

You can use event: React.MouseEvent<HTMLButtonElement, MouseEvent> as type, like so:

const inputHandler = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
  event.preventDefault();
  //...
};

edited Sep 25, 2023 at 7:46

answered Jan 29, 2022 at 16:06

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Collectives™ on Stack Overflow

React typescript onClick event typing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related