React provides a seamless way to handle changes in the input elements of a web page, such as text fields and checkboxes, through the onChange event. In this article, we'll take a closer look at React onChange events and how they can be used in your React applications.

What are onChange Events in React?

In React, onChange events are triggered whenever the value of an input element changes. For example, when a user types in a text field, an onChange event is fired, and the value of the text field is updated. This allows you to respond to changes in the input and take action accordingly, such as updating the state of your React component or sending an API request.

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

How to Use onChange Events in React

Using onChange events in React is straightforward. You can attach an onChange event handler to an input element using the onChange attribute. Here's an example:

import React, { useState } from "react";

function TextInputElement() {
  const [inputValue, setInputValue] = useState("");

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleChange} value={inputValue} />
      <p>{inputValue}</p>
    </div>
  );
}

export default TextInputElement;

In this example, we're using the useState hook to manage the state of the inputValue. When the onChange event is fired, the handleChange function is called, which updates the value of inputValue with the new value from the event. The value of inputValue is then displayed on the screen.

Note that the onChange event only triggers when the value of the input element changes. So, if you want to ensure that the inputValue is always up to date, you'll need to make sure to call setInputValue whenever the inputValue changes.

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

Handling Multiple Input Elements

If you have multiple input elements in your React component, you'll need to handle the onChange event for each of them. You can do this by creating a separate onChange event handler for each input element, like this:

import React, { useState } from "react";

function NameInput() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

  function handleFirstName(event) {
    setFirstName(event.target.value);
  }

  function handleLastName(event) {
    setLastName(event.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleFirstName} value={firstName} />
      <input type="text" onChange={handleLastName} value={lastName} />
      <p>Hello {firstName} {lastName}</p>
    </div>
  );
}

export default NameInput;

In this example, we have two input elements and two separate onChange event handlers for each of them. This allows us to handle changes to each input element independently and update their respective state accordingly.