Understanding the onChange Event in React: A Guide to handle User Input

The onChange event is triggered when the value of an input, select, or textarea element changes. It's commonly used in forms to detect user input and respond to changes in real-time.

1.   For <input> and <textarea>: The event triggers after each keystroke.

2.   For <select>: It triggers when a different option is selected.

 

Step 1: Go to the post (Quickly Set Up a React Project with Vite: A Step-by-Step), and set up a React Project ‘onchange-event-demo’.

 

Project structure looks like below.

 

Step 2: Create components folder in src/ folder and define EchoTracker component.

 

EchoTracker.jsx

<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #000080; font-weight: bold">export</span> <span style="color: #000080; font-weight: bold">default</span> <span style="color: #000080; font-weight: bold">function</span> EchoTracker(){
    <span style="color: #000080; font-weight: bold">return</span> (
        &lt;&gt;
            &lt;form&gt;
                &lt;label htmlFor=<span style="color: #0000FF">&quot;echo&quot;</span>&gt;Enter Any Text&lt;<span style="color: #a61717; background-color: #e3d2d2">/label&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;</span>
                &lt;input id=<span style="color: #0000FF">&quot;echo&quot;</span> type=<span style="color: #0000FF">&quot;text&quot;</span> placeholder=<span style="color: #0000FF">&quot;Type Anyhting&quot;</span> 
                onChange = {(event) =&gt; {
                    console.log(event.target.value);
                }}
                /&gt;
            &lt;<span style="color: #a61717; background-color: #e3d2d2">/form&gt;</span>
        &lt;<span style="color: #a61717; background-color: #e3d2d2">/&gt;</span>
    );
}
</pre></div>

1.   The onChange event handler listens for changes in the input field. In this example, every time a user types in the input field, the onChange function is triggered. The function receives an event object, which contains details about the event that occurred. Inside the function, event.target.value is used to access the current value of the input field, and the console.log(event.target.value) statement logs it to the console. For example, If a user types "Hello", the console will show like below.

 

H

He

Hel

Hell

Hello

 

2.   The htmlFor attribute in React corresponds to the standard for attribute in HTML. It associates the <label> element with the <input> element, using the id of the input. In this case, the htmlFor="echo" in the <label> tag points to the input field with id="echo". When the user clicks on the label "Enter Any Text", the focus automatically shifts to the associated input field, improving accessibility.

 

Step 3: Update main.jsx file like below.

 

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import EchoTracker from './components/EchoTracker'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <EchoTracker />
  </StrictMode>,
)

Step 4: Deploy and run the Application.

cd onchange-event-demo
npm install
npm run dev

Open the url ‘http://localhost:5173/’ in browser, you will see below screen.

Open Inspect panel and type the text Hello, you will see the messages like below.

Note

In React, the attribute for is replaced by htmlFor because for is a reserved keyword in JavaScript.

 

You can download this application from this link.

Previous                                                    Next                                                    Home