A React component made up of a form with two input fields using the onChange event handler.

React provides us with some really useful utilities. One of them is the normalized event system that it provides. Today we are going to look at one of events  — The onChange event. The onChange event in React detects when the value of an input element changes. Let’s dive into some common examples of how to use onChange in React.

What is the onChange Event Handler?

JavaScript allows us to listen to an input’s change in value by providing the attribute onchange. React’s version of the onchange event handler is the same, but camel-cased.

If you’re using forms inside of a React component, it’s a good idea to understand how the onChange event handler works with forms, state, and how you can pass the value to a function.

Event handlers are an important part of React. Learn more about other Event handlers such as the onClick, onDrag, onHover or the onKeyPress event.

Example: Add an onChange Handler to an Input

Let’s begin with a simple, but extremely important example: how to add an onChange event handler to an input, checkbox, or select element in a React component:

... return ( <input name="firstName" onChange={handleChange} /> ); ...

The above code displays a single input field which, when typed in, passes its current value to the handleChange function. As mentioned before, JavaScript’s native onchange syntax is written in all lowercase, however we use camel-case for our event handler names in React.

Example: Pass an Input Value from the onChange Event in a React Component

Let’s expand on the previous example by declaring a new function inside of our React component for the onChange handler to pass a value to. We’ll call it handleChange, and have it log the input’s current value to the console:

import React from 'react'; function App() { function handleChange(event) { console.log(event.target.value); } return ( <input name="firstName" onChange={handleChange} /> ); } export default App;

An onChange event handler returns a Synthetic Event object which contains useful meta data such as the target input’s id, name, and current value.

We can access the target input’s value inside of the handleChange by accessing e.target.value. Therefore, to log the name of the input field, we can log e.target.name.

Log the whole event object to the console and click through it to see what other useful information it provides.

The example above was of a functional component. If you’re using a Class component, you will have to bind the onChange event handler to the context of this. To learn more about the differences between Functional components and Class-based components check out this guide.

Example: Saving an Input Value Inside of State using onChange in a React Component

The final example we’ll explore today is how to store an input’s current value inside of a state value. We are going to use the useState hook provided to us by React. You can learn more about the useState hook here.

This is extremely useful for keeping track of the current input fields values, and displaying them on the UI.

import React from 'react'; function App() { const [firstName, setFirstName] = useState(''); return ( <input name="firstName" onChange={e => setFirstName(e.target.value)} /> ); } export default App;
👋 Hey, I'm James Dietrich
I work full-time at an AI-based startup out of San Francisco, CA. My true passion is to help others. My tutorials help 150,000+ developers learn React and JavaScript every month. Follow on Twitter, or Github.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.


GS says:

Can you use onchange to dynamically change between Grid view and Photo view on react?

Edson says:

I’m using the Highcharts lib in a project with some input text fields on the same page. As expected, the onChange will trigger re-render on the entire page, causing a side effect rebuilding the chart every key pressed in the text field.

Is there a way to prevent some elements from re-render?