Event Handling in ReactJS: onClick, onChange, and Passing Functions as Props

By /

Introduction to Event Handling in ReactJS

Event handling is one of the most important concepts in ReactJS. Every interactive web application depends on events like button clicks, form input changes, mouse movements, and keyboard actions. In React, event handling allows us to respond to user actions and update the UI accordingly.

If you are coming from JavaScript or HTML, you may already know events like onclick or onchange. React uses similar ideas but with a cleaner, more structured, and more powerful approach.

In this article, we will deeply understand:

  • What event handling is in ReactJS
  • How onClick works in React
  • How onChange works in React
  • How to pass functions as props
  • Real-world examples with simple explanations
  • Best practices and common mistakes

This guide is written in simple English, beginner-friendly, SEO-optimized, and suitable for students and developers learning ReactJS.

What is Event Handling in React?

An event is any action performed by the user, such as:

  • Clicking a button
  • Typing in an input box
  • Selecting a dropdown value
  • Submitting a form

Event handling in ReactJS means writing code that reacts when these actions happen.

React uses Synthetic Events, which are wrappers around native browser events. This makes events work the same way across all browsers.

Key Features of React Event Handling

  • Uses camelCase naming (onClick, onChange)
  • Passes a function instead of a string
  • Uses SyntheticEvent for better performance

Basic Syntax of Event Handling in React

<button onClick={handleClick}>Click Me</button>

Here:

  • onClick is the event
  • handleClick is the function that runs when the button is clicked

Important: Do not use parentheses () unless you are calling the function intentionally.

Understanding onClick Event in ReactJS

The onClick event is used when a user clicks on an element such as a button, div, image, or link.

Example: Simple Button Click

function App() {
  function handleClick() {
    alert("Button clicked!");
  }

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

Explanation

  • When the user clicks the button
  • React calls the handleClick function
  • The alert message is displayed

This is the most basic form of onClick event handling in ReactJS.

Using Arrow Functions with onClick

You can also use arrow functions directly inside JSX.

<button onClick={() => alert("Clicked")}>Click Me</button>

When Should You Use Arrow Functions?

Use arrow functions when:

  • You want to pass parameters
  • The logic is very small

Avoid using large logic inside JSX because it reduces readability.

Passing Parameters to onClick Handler

Sometimes, you want to pass values to the click handler.

Example: Passing Data

function App() {
  function showMessage(name) {
    alert(`Hello ${name}`);
  }

  return (
    <button onClick={() => showMessage("React User")}>
      Click Me
    </button>
  );
}

Explanation

  • We use an arrow function
  • This prevents the function from executing immediately
  • The function runs only when the button is clicked

Common Mistake with onClick

The below is the wrong way as this calls the function immediately, not on click.

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

This is the coreect way

<button onClick={handleClick}>Click</button>

Understanding onChange Event in ReactJS

The onChange event is commonly used with form elements like:

  • Input fields
  • Textareas
  • Select dropdowns

It triggers whenever the value of an input changes.

Example: Input Field with onChange

import { useState } from "react";

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

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

  return (
    <input
      type="text"
      value={name}
      onChange={handleChange}
      placeholder="Enter your name"
    />
  );
}

Explanation

  • event.target.value contains the input value
  • useState stores the value
  • React updates the UI automatically

This is called a controlled component.

Controlled vs Uncontrolled Components

Controlled Components

  • React controls the input value
  • Uses state and onChange

Uncontrolled Components

  • Browser controls the input
  • Uses ref

For most applications, controlled components are recommended.

Handling Multiple Inputs with onChange

Instead of writing separate handlers, you can use one function.

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
  });

  function handleChange(e) {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  }

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

Passing Functions as Props in ReactJS

One of the most powerful features of React is passing functions as props. This allows child components to communicate with parent components.

Why Do We Pass Functions as Props?

  • To handle events in parent component
  • To update parent state from child
  • To reuse logic

Parent to Child Communication

Parent Component

function Parent() {
  function showAlert() {
    alert("Hello from Parent");
  }

  return <Child onButtonClick={showAlert} />;
}

Child Component

function Child(props) {
  return (
    <button onClick={props.onButtonClick}>
      Click Child Button
    </button>
  );
}

Explanation

  • Parent passes function as a prop
  • Child triggers the function using onClick
  • Parent logic executes

Passing Data from Child to Parent

function Parent() {
  function receiveData(data) {
    console.log(data);
  }

  return <Child sendData={receiveData} />;
}

function Child({ sendData }) {
  return (
    <button onClick={() => sendData("Hello Parent")}>
      Send Data
    </button>
  );
}

Event Handling Best Practices in React

  • Keep event handlers simple
  • Avoid inline logic for large operations
  • Use meaningful function names
  • Do not mutate state directly
  • Use arrow functions carefully

Event handling is the backbone of interactive React applications. Understanding onClick, onChange, and passing functions as props will help you build dynamic, scalable, and reusable components.

Once you master these concepts, you can easily handle forms, user interactions, and component communication in ReactJS.

Keep practicing with real projects, and React event handling will become second nature.

Scroll to Top