Typing React onChange Event.target.value in TypeScript

By the end of this page, you will understand how React types onChange events in TypeScript, why any is unnecessary here, and how to correctly type reusable input component props. You will also learn the difference between target and currentTarget, and how to write safer event handlers for form inputs.

In React with TypeScript, form events already have built-in types. You usually do not add a custom target property to your props interface. Instead, you type the event handler itself.

For an HTML <input>, the correct event type is usually:

React.ChangeEvent<HTMLInputElement>

That means TypeScript knows the event came from an HTMLInputElement, so properties like .value, .checked, and .name are available.

A common beginner mistake is trying to modify the props interface to redefine event internals such as target. That does not work because target is part of the event object, not your component's props shape.

Another important detail: in React, currentTarget is often safer to use than target.

• target is the element that originally triggered the event.
• currentTarget is the element the handler is attached to.

For typed form handlers, this is the common pattern:

Think of a React event as a labeled package.

• The event type tells you what kind of package it is.
• The generic type like HTMLInputElement tells you which element sent it.
• Once the label is correct, TypeScript knows what is inside.

So instead of saying, "Trust me, this package contains a value" with as any, you tell TypeScript, "This is a change event from an input element." Then TypeScript can safely allow value.

Another way to think about it:

• props describe what your component accepts.
• event describes what happened during user interaction.

Do not try to store event typing inside props fields like target. Type the event where it is used.

Basic typed onChange

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.currentTarget.value;
  console.log(value);
};

<input onChange={handleChange} />

Here, TypeScript knows:

• this is a change event
• it comes from an HTMLInputElement
• value is a string

Inline handler

<input
  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    data.motto = e.currentTarget.value;
  }}
/>

Better reusable props typing

If you are building a custom Input component, use input element props rather than where is your React class.

Consider this code:

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.currentTarget.value;
  console.log(value);
};

Step by step:

1. The user types into the input.
2. React fires an onChange event.
3. The handler receives e.
4. TypeScript sees that e is a React.ChangeEvent<HTMLInputElement>.
5. Because the element type is HTMLInputElement, e.currentTarget.value is known to be a string.
6. The string is stored in value.
7. You can now assign it to state, an object field, or send it to validation logic.

Example in context:

function App() {
  const [name, setName] = React.();

    = () => {
     nextValue = e..;
    (nextValue);
  };

   ;
}

Correctly typed input change handlers are used in many real applications:

Forms

const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setEmail(e.currentTarget.value);
};

Used in:

• sign-up forms
• password reset forms
• checkout forms

Search and filtering

const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
  setQuery(e.currentTarget.value);
};

Used in:

• product search
• table filtering
• admin dashboards

Validation

const handleUsernameChange = (e: React.ChangeEvent<>) => {
   value = e..;
  (value);
  (value. < );
};

In real projects, developers usually rely on built-in React prop types instead of redefining DOM event shapes manually.

Common pattern: reuse native input props

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
};

This gives your component support for standard props such as:

• value
• defaultValue
• onChange
• placeholder
• disabled
• name

Common pattern: typed handler passed as prop

interface InputProps {
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

This is useful when you want strict control over which props are allowed.

1. Using any

Broken:

onChange={(e) => data.motto = (e.target as any).value}

Why it is a problem:

• disables type safety
• hides mistakes
• loses autocomplete

Better:

onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
  data.motto = e.currentTarget.value;
}}

2. Typing the wrong thing

Broken:

interface InputProps extends React.HTMLProps<Input> {
  target: { value: string };
}

Why it is wrong:

• target belongs to the event object, not the component props

target vs currentTarget

// Typed input change event
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.currentTarget.value;
};

// Custom input props
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
}

// Explicit onChange prop typing
interface InputProps {
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  value?: string;
}

Rules

• Use React.ChangeEvent<HTMLInputElement> for <input> changes.

How do I type onChange for a React input in TypeScript?

Use:

(e: React.ChangeEvent<HTMLInputElement>) => { ... }

Should I use target.value or currentTarget.value?

currentTarget.value is usually the safer and clearer choice in typed React handlers.

Why is React.HTMLProps<Input> wrong here?

Because Input is your React component class, not the DOM element type. For a real input element, use HTMLInputElement.

What is the correct props type for a reusable input component?

Usually:

React.InputHTMLAttributes<HTMLInputElement>

Can I still use an inline onChange handler?

Yes.

<input onChange={() => (e..)} />

• React SyntheticEvent — React wraps browser events in its own event system.
• Controlled components — input values are stored in React state and updated through onChange.
• TypeScript generics — React event types use generics like HTMLInputElement.
• DOM element types — types such as HTMLInputElement, HTMLTextAreaElement, and HTMLSelectElement are essential for form typing.
• Component props typing — reusable React components need correctly typed props.
• Form handling in React — onChange, validation, and state updates work together in forms.