Fix Property Not Existing On Eventtarget Typescript

You're typing an event handler in TypeScript:

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value); // Error here
}

And you get: Property 'value' does not exist on type 'EventTarget'.

Why it happens

TypeScript's Event type is generic. The target property is typed as EventTarget, which only has basic properties like addEventListener, removeEventListener, etc. It doesn't know that target is actually an <input> element with value, checked, etc.

The fix

Option 1: Use the correct event type

For form inputs, use the specific event type:

// For input/textarea
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

// For checkbox
function handleCheck(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.checked);
}

// For select
function handleSelect(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log(event.target.value);
}

Option 2: Cast the target

If you need more control:

function handleChange(event: React.FormEvent<HTMLInputElement>) {
  const value = (event.target as HTMLInputElement).value;
  console.log(value);
}

Option 3: Type guard (when using native events)

function handleClick(event: MouseEvent) {
  const target = event.target as HTMLElement;
  console.log(target.tagName);
}

Quick reference

Just remember: for inputs, checkboxes, and textareas use ChangeEvent<HTMLElement>. Forms use FormEvent. That's usually all you need.