React onChange Event

React onChange is an event handler that triggers when there is any change in the input field.

This event captures the changes in an Input Field and executes the handler function. It is fired when the input field is modified and loses focus. It is one of the form events that updates when the input field is modified.

It is similar to the HTML DOM onchange event but uses the camelCase convention in React.

Syntax:

<input onChange={handleChange} >

Parameter:

• handleChange: It is a function call that includes the code to be executed when an event triggers

Return Type:

• event: It is an event object containing information about the event like target element and values

React onChange Event Examples

Below are the simple implementations for React onChange Event.

Example 1: Updating state using onChange Event

This example demonstrates the use of the onChange event handler to update the states in React .

Output:

👁 Peek-2023-11-28-14-10

Example 2: Handlling select input using React onChange Event

This example demonstrate the use of the onChange event handler in select input.

Output:
👁 Peek-2023-11-28-15-14