React onInput Event Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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 convention in React. Syntax:<input onInput={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 valuesExample 1: This example demonstrates the use of the onInput 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 onInput Event Handler</h3> <input value={value} onInput={handleChange} /> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Example 2: This example demonstrate the use of the onInput event handler in select input. JavaScript 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} onInput={handleChange}> <option value={"HTML"}>HTML</option> <option value={"CSS"}>CSS</option> <option value={"JavaScript"}> JavaScript </option> </select> {/* <input value={value} onChange={handleChange} /> */} <br /> <br /> <br /> <div>User Input:- {value}</div> </div> ); } export default App; Output: Comment More infoAdvertise with us Next Article Company-wise Practice Problems J jatinsharmatu54 Follow Improve Article Tags : Web Technologies ReactJS React Events Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like