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.
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));
}