Events in React — onClick, onChange, onInput events

Events in React
onclick Event
using State
onSubmit Event
onChange Event

Events in React work very similar to events in vanilla JavaScript, but with a few important differences. Events are how users interact with your app — like clicking a button, typing in an input box, or submitting a form.

What are Events in React?

An event is an action that happens in the user interface. Common categories include keyboard, mouse, and window events. Some common examples are:

Popular events in React

Clicking a button → onClick
Typing in an input → onChange
Submitting a form → onSubmit
Mouse actions → onMouseEnter, onMouseLeave
Keyboard actions → onKeyDown, onKeyUp
Window actions → onResize, onScroll

onClick in React

In React, event names are written in camelCase (for example, onClick instead of onclick), and handlers are passed as functions rather than strings.


function ClickExample() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

In the example above, ClickExample is a component and handleClick is the function that will be called when the button's onClick event fires.

Passing Arguments

To pass arguments to an event handler, wrap the call in an arrow function so a new function is passed as the handler (not the result of calling it).


function Greeting() {
  function sayHello(name) {
    console.log(`Hello ${name}`);
  }

  return (
    <button onClick={() => sayHello("Avi")}>Click Me</button>
  );
}

Using State in Events

Events are often used to update state. Example: a counter app where a button click increments a counter whose initial value is 0 and the current value is displayed on the screen.


import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increase</button>
    </div>
  );
}

Whenever we click on the button, the state change and re-renders the component.

Form Events

React lets you handle form events easily. The common form events are onChange and onSubmit. Some examples include:


import { useState } from "react";

    function FormExample() {
      const [name, setName] = useState("");

      function handleChange(e) {
        setName(e.target.value);
      }

      function handleSubmit(e) {
        e.preventDefault();     // prevent page reload
        console.log(`Submitted: ${name}`);
      }

      return (
        <form onSubmit={handleSubmit}>
          <input value={name} onChange={handleChange} />
          <button type="submit">Submit</button>
        </form>
      );
}

change Events

The onChange event is commonly used with input fields to capture user input.


import { useState } from "react";

function FormExample() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();     // prevent page reload
    console.log(`Submitted: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}