React onChange Event Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 triggersReturn Type:event: It is an event object containing information about the event like target element and valuesReact onChange Event ExamplesBelow are the simple implementations for React onChange Event. Example 1: Updating state using onChange EventThis example demonstrates the use of the onChange event handler to update the states in React . JavaScript // Filename - App.js import React, { useState } from "react"; function App() { const [value, setValue] = useState(""); function handleChange(e) { setValue(e.target.value); } return ( <div style={{ textAlign: "center", margin: "auto" }} > <h1 style={{ color: "Green" }}> GeeksforGeeks </h1> <h3> Exemple for React onChange Event Handler </h3> <input value={value} onChange={handleChange} /> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Example 2: Handlling select input using React onChange EventThis example demonstrate the use of the onChange event handler in select input. JavaScript // Filename - App.js import React, { useState } from "react"; function App() { const [value, setValue] = useState("HTML"); function handleChange(e) { setValue(e.target.value); } return ( <div style={{ textAlign: "center", margin: "auto" }} > <h1 style={{ color: "Green" }}> GeeksforGeeks </h1> <h3> Exemple for React onChange Event Handler </h3> <select value={value} onChange={handleChange}> <option value={"HTML"}>HTML</option> <option value={"CSS"}>CSS</option> <option value={"JavaScript"}> JavaScript </option> </select> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Comment More infoAdvertise with us Next Article React onChange Event J jatinsharmatu54 Follow Improve Article Tags : Web Technologies ReactJS React Events Similar Reads React onInput Event React onInput is an event handler that triggers then there is any change in the input field. It is fired immediately when the user is changing input. It is one of the form events that updates when the input field is modified. It is similar to the HTML DOM oninput event but uses the camelCase convent 2 min read DropDown OnChange Event Using ReactJS The DropDown OnChange event in ReactJS is an important functionality that allows developers to respond to changes made to a dropdown menu. This event is triggered when the user selects a new option from the dropdown list. In this article, we will learn how to use onChange event in DropDown menu.Prer 2 min read React Events In React, events are actions that occur within an application, such as clicking a button, typing in a text field, or moving the mouse. React provides an efficient way to handle these actions using its event system. Event handlers like onClick, onChange, and onSubmit are used to capture and respond t 8 min read What is onChangeCapture Event in ReactJS ? ReactJS, a popular JavaScript library for building user interfaces, provides a wide range of events that developers can utilize to create interactive and dynamic applications. One such event is the onChangeCapture event, which is specifically designed for handling changes to form inputs and capturin 2 min read HTML DOM onchange Event The HTML DOM onchange event occurs when the value of an element has been changed. It also works with radio buttons and checkboxes when the checked state has been changed. Note: This event is similar to the oninput event but the only difference is that the oninput event occurs immediately after the v 1 min read HTML onchange Event Attribute The onchange event attribute works when the value of the element changes and select the new value from the List. It is a part of the event attribute. It is similar to oninput event attribute. But the difference is that oninput attribute event occurs immediately after the value of the element changes 2 min read JavaScript Events JavaScript Events are actions or occurrences that happen in the browser. They can be triggered by various user interactions or by the browser itself. HTML<html> <script> function myFun() { document.getElementById( "gfg").innerHTML = "GeeksforGeeks"; } </script> <body> <but 3 min read AngularJS ng-change Directive The ng-change Directive in AngularJS is used whenever the value of an input element changes. The expression is evaluated immediately whenever there is a change in the input value. It requires an ng-model directive to be present. It is triggered whenever there is any single change in the input. It ca 2 min read HTML onhashchange Event Attribute HTML onhashchange Event Attribute works when there have been changes to the anchor part. The anchor part starts with the '#' symbol of the current URL. It also enables the execution of a script or function on hash change and is used for dynamic web applications updating without full page reload. In 2 min read How to use handleChange() function in react component? An onChange event is triggered when values are entered in the input. This fires a function handleChange(), that is used to set a new state for the input.1. Handling Single InputFirst, we have to set up the input field as a controlled component so that we have a controlled component that senses chang 3 min read Like