Event Handling with Functions in React JS

Event Handling with Functions is a fundamental concept in React JS that allows developers to execute JavaScript functions in response to user interactions. These interactions include clicking buttons, typing in input fields, submitting forms, hovering over elements, and selecting options. React event handlers make web applications interactive, dynamic, and responsive.

Learn more through JustAcademy React JS Training or Register for React JS Course Demo.

1. What Is Event Handling in React?

Event handling in React is the process of responding to events triggered by users or browser interactions. Developers define JavaScript functions called event handlers and connect them to JSX elements using event props such as onClick, onChange, and onSubmit.

When the specified event occurs, React invokes the associated event handler function.

Example:

function App() {
  function handleClick() {
    alert("Button clicked!");
  }
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}
export default App;

Explanation: The handleClick function runs when the user clicks the button. React calls the function because it is assigned to the button's onClick event handler.

2. Why Is Event Handling Important?

• User interaction: Allows users to interact with buttons, forms, menus, and other interface elements.
• Dynamic interfaces: Updates the interface in response to user actions.
• State management: Event handlers can update component state using Hooks such as useState.
• Form processing: Handles input changes, validation, and form submission.
• Reusable logic: Allows functions to be reused across components.
• Application functionality: Supports actions such as adding products to a cart, searching, and navigating.
• Better user experience: Makes applications more interactive and responsive.

3. What Are Event Handler Functions?

An event handler function is a JavaScript function that executes when a particular event occurs. In React, these functions are commonly defined inside components and passed to JSX elements.

Example:

function Message() {
  function handleMessage() {
    console.log("Welcome to React JS!");
  }
  return (
    <button onClick={handleMessage}>
      Show Message
    </button>
  );
}
export default Message;

When the button is clicked, the function prints a message in the browser console.

Common Naming Convention

React developers commonly name event handler functions using the word handle followed by the event or action name.

• handleClick() — handles a click event.
• handleChange() — handles a change event.
• handleSubmit() — handles a form submission.
• handleMouseEnter() — handles a mouse entering an element.
• handleKeyDown() — handles a key being pressed down.

4. How to Attach Functions to Events

React allows developers to attach event handler functions to JSX elements through event props. The event name uses camelCase, such as onClick rather than the lowercase onclick attribute used in HTML.

Example:

function App() {
  function handleClick() {
    console.log("Hello React!");
  }
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}
export default App;

In this example, the function is passed as a reference. React executes it when the button is clicked.

5. Passing a Function vs Calling a Function

One of the most important rules in React event handling is to pass the function reference rather than calling the function during rendering.

Correct Example:

function App() {
  function handleClick() {
    alert("Button clicked!");
  }
  return <button onClick={handleClick}>Click Me</button>;
}
export default App;

Example with an Argument:

function App() {
  function greet(name) {
    alert("Hello, " + name);
  }
  return (
    <button onClick={() => greet("Rahul")}>
      Greet Rahul
    </button>
  );
}
export default App;

The arrow function ensures that greet("Rahul") runs only when the button is clicked.

6. Handling Click Events with Functions

The onClick event is used when a user clicks an element, such as a button. It is commonly used for displaying messages, updating state, toggling content, and triggering application actions.

Example:

function ClickExample() {
  function handleClick() {
    console.log("You clicked the button!");
  }
  return (
    <button onClick={handleClick}>
      Click Here
    </button>
  );
}
export default ClickExample;

Output: When clicked, the message appears in the browser console.

7. Handling Events with Arrow Functions

Arrow functions can be used directly inside JSX to define short event handlers. They are also useful when passing arguments to existing functions.

Example:

function App() {
  return (
    <button onClick={() => alert("Welcome to React!")}>
      Show Welcome Message
    </button>
  );
}
export default App;

Example with an Argument:

function App() {
  function showMessage(message) {
    console.log(message);
  }
  return (
    <button onClick={() => showMessage("React is easy to learn")}>
      Display Message
    </button>
  );
}
export default App;

Arrow functions are convenient for simple actions. For complex logic, a separately named handler can improve readability.

8. Passing Event Objects to Functions

React passes an event object to an event handler when the event occurs. This object contains information about the event, including the element that triggered it and the event type.

Example:

function App() {
  function handleClick(event) {
    console.log("Event type:", event.type);
    console.log("Clicked element:", event.currentTarget);
  }
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}
export default App;

Important properties and methods:

• event.type — identifies the event type.
• event.target — refers to the element where the event originated.
• event.currentTarget — refers to the element whose handler is currently running.
• event.preventDefault() — prevents the browser's default action when applicable.
• event.stopPropagation() — prevents the event from continuing to bubble to ancestor elements.

9. Handling Multiple Events with Functions

A component can define multiple event handler functions to manage different user interactions. Each handler can perform a separate action.

Example:

function App() {
  function handleClick() {
    console.log("Button clicked");
  }
  function handleMouseEnter() {
    console.log("Mouse entered");
  }
  function handleMouseLeave() {
    console.log("Mouse left");
  }
  return (
    <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}
export default App;

The button handles clicks, while the surrounding div handles mouse enter and mouse leave events.

10. Updating State Through Event Handler Functions

Event handlers often update component state using the useState Hook. When state changes, React can render the updated interface.

Example: Counter Application

import { useState } from "react";

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

  function handleIncrement() {
    setCount(previousCount => previousCount + 1);
  }

  function handleDecrement() {
    setCount(previousCount => previousCount - 1);
  }

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>Increase</button>
      <button onClick={handleDecrement}>Decrease</button>
    </div>
  );
}
export default Counter;

Explanation:

• useState initializes count to zero.
• handleIncrement increases the count.
• handleDecrement decreases the count.
• The functional state updater uses the previous state to calculate the next value.
• React updates the displayed count after state changes.

11. Passing Event Handler Functions as Props

In React, a parent component can pass a function to a child component through props. The child can then call that function in response to an event. This pattern allows a child component to notify its parent that an action has occurred.

Example:

function Child({ onGreet }) {
  return (
    <button onClick={onGreet}>
      Greet Parent
    </button>
  );
}

function App() {
  function handleGreet() {
    alert("Hello from the child button!");
  }

  return <Child onGreet={handleGreet} />;
}
export default App;

The App component defines handleGreet and passes it to Child using the onGreet prop. The child attaches that function to its button's onClick event.

12. Creating Reusable Event Handler Functions

Reusable event handler functions help reduce duplicated code. A single function can handle similar interactions for multiple elements by accepting different arguments.

Example:

function App() {
  function handleMessage(message) {
    alert(message);
  }
  return (
    <div>
      <button onClick={() => handleMessage("Hello!")}>
        Hello
      </button>
      <button onClick={() => handleMessage("Welcome!")}>
        Welcome
      </button>
      <button onClick={() => handleMessage("Goodbye!")}>
        Goodbye
      </button>
    </div>
  );
}
export default App;

The same handleMessage function is reused with different messages.

13. Handling Form Events with Functions

Event handler functions are frequently used to manage form input and submission. The onChange event can update a field's value, while onSubmit can process the form.

Example:

import { useState } from "react";

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

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

  function handleSubmit(event) {
    event.preventDefault();
    alert("Submitted name: " + name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Enter your name"
        required
      />
      <button type="submit">Submit</button>
    </form>
  );
}
export default ContactForm;

Here, handleChange updates the name state, and handleSubmit processes the current value without triggering the browser's default page reload.

14. Understanding Event Propagation

Event propagation describes how an event travels through the DOM. In React, many events bubble from the element where the event occurred to its ancestor elements. As a result, clicking a nested button can trigger both the button's handler and a parent's click handler.

Example:

function App() {
  function handleParentClick() {
    console.log("Parent clicked");
  }

  function handleChildClick() {
    console.log("Child clicked");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>
        Click Child
      </button>
    </div>
  );
}
export default App;

When the button is clicked, the child handler runs first, followed by the parent's handler, because the click event bubbles upward.

15. Stopping Event Propagation

The stopPropagation() method prevents an event from bubbling to ancestor elements. It is useful when a child interaction should not trigger a parent's event handler.

Example:

function App() {
  function handleParentClick() {
    console.log("Parent clicked");
  }

  function handleChildClick(event) {
    event.stopPropagation();
    console.log("Child clicked");
  }

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>
        Click Child
      </button>
    </div>
  );
}
export default App;

When the button is clicked, only the child's message is logged because the event is stopped before reaching the parent handler.

16. Preventing Default Browser Behavior

Some browser events have default behavior. For example, submitting a traditional HTML form may navigate to another URL or reload the page. The preventDefault() method prevents that default behavior when the application needs to handle the event itself.

Example:

function App() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log("Custom submission handled");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Enter name" />
      <button type="submit">Submit</button>
    </form>
  );
}
export default App;

Difference: preventDefault() prevents the browser's default action, whereas stopPropagation() prevents the event from bubbling to ancestor handlers. They serve different purposes.

17. Handling Conditional Actions with Functions

Event handler functions can use conditional statements to decide which action to perform based on the current state or other values.

Example:

import { useState } from "react";

function LoginToggle() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  function handleToggle() {
    setIsLoggedIn(previousValue => !previousValue);
  }

  return (
    <div>
      <h2>{isLoggedIn ? "Welcome Back!" : "Please Log In"}</h2>
      <button onClick={handleToggle}>
        {isLoggedIn ? "Log Out" : "Log In"}
      </button>
    </div>
  );
}
export default LoginToggle;

Clicking the button toggles the state and changes the displayed message and button label. This example demonstrates UI behavior only; it does not perform real authentication.

18. Handling Events in Lists

When rendering a list, event handler functions can receive an item's ID or another value through an arrow function. This lets the application identify which item the user selected.

Example:

function App() {
  const products = [
    { id: 1, name: "Laptop" },
    { id: 2, name: "Keyboard" },
    { id: 3, name: "Mouse" }
  ];

  function handleSelect(productName) {
    alert("Selected: " + productName);
  }

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>
          {product.name}
          <button onClick={() => handleSelect(product.name)}>
            Select
          </button>
        </li>
      ))}
    </ul>
  );
}
export default App;

Each button calls the same handler with the name of its corresponding product. The key helps React identify each list item.

19. Common Event Props in React

20. Common Mistakes in Event Handling

• Calling the handler during rendering: Avoid onClick={handleClick()} when the function should execute only after a click.
• Using incorrect capitalization: Use React event props such as onClick and onChange.
• Forgetting curly braces: Pass JavaScript functions with JSX expressions, such as onClick={handleClick}.
• Modifying state directly: Use a state setter instead of directly changing a state variable.
• Ignoring the event object: Use the event parameter when the handler needs information about the event or its target.
• Confusing preventDefault and stopPropagation: Understand that they solve different problems.
• Using inaccessible clickable elements: Prefer semantic elements such as button instead of making a div clickable without keyboard support.
• Writing overly complex inline handlers: Move complicated logic into named functions for clarity.
• Forgetting list keys: Add stable keys when rendering lists of elements.

21. Best Practices for Event Handling

• Use descriptive function names such as handleClick and handleSubmit.
• Pass function references to event props instead of invoking handlers during rendering.
• Use arrow functions when arguments must be passed to handlers.
• Keep complex event logic in named functions.
• Use state setters to update component state.
• Use semantic HTML elements such as button, form, and input.
• Use preventDefault() only when the default browser behavior should be prevented.
• Use stopPropagation() only when preventing ancestor handlers is necessary.
• Pass callbacks as props to separate component presentation from application behavior.
• Test event handlers for expected behavior and edge cases.

22. Practical Project: Interactive Counter

This project demonstrates how to use event handler functions to increase, decrease, and reset a counter.

App.jsx

import { useState } from "react";

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

  function handleIncrease() {
    setCount(previousCount => previousCount + 1);
  }

  function handleDecrease() {
    setCount(previousCount => previousCount - 1);
  }

  function handleReset() {
    setCount(0);
  }

  return (
    <div>
      <h1>Interactive Counter</h1>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrease}>Increase</button>
      <button onClick={handleDecrease}>Decrease</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}
export default App;

Project Explanation

• useState stores the counter value.
• handleIncrease increments the counter.
• handleDecrease decrements the counter.
• handleReset sets the counter to zero.
• Each button is connected to its corresponding event handler function.

23. Interview Questions and Answers

Q1. What is event handling in React?

Event handling is the process of responding to user interactions by connecting event handler functions to JSX elements.

Q2. What is an event handler function?

An event handler function is a JavaScript function that runs when a specified event occurs.

Q3. How do you handle a click event in React?

Define a function and pass it to an element's onClick prop, such as Click.

Q4. Why should we not use parentheses when passing a function to onClick?

Parentheses invoke the function immediately. Passing the function reference allows React to call it when the event occurs.

Q5. Can we pass arguments to event handlers?

Yes. Use an arrow function, such as onClick={() => handleClick("Hello")}.

Q6. What is the event object?

The event object contains information about the event and provides methods such as preventDefault() and stopPropagation().

Q7. What is the difference between preventDefault() and stopPropagation()?

preventDefault() prevents the default browser action, while stopPropagation() prevents the event from bubbling to ancestor handlers.

Q8. Can event handler functions update React state?

Yes. Event handlers can call state setter functions, which allow React to render the updated interface.

Q9. Can a function be passed from a parent component to a child component?

Yes. A function can be passed through props and invoked by the child in response to an event.

Q10. What naming convention is commonly used for event handlers?

Names commonly begin with handle, followed by the event or action name, such as handleClick, handleChange, or handleSubmit.

24. Practice Exercises

1. Create a button that displays an alert when clicked.
2. Write a function that changes a heading when a button is clicked.
3. Create a counter with increase, decrease, and reset buttons.
4. Pass a message to a function through an arrow function.
5. Create a form with separate change and submit handlers.
6. Build a parent component that passes an event handler to a child component.
7. Create a list of products with a button to select each product.
8. Demonstrate event bubbling with a parent div and a child button.
9. Use stopPropagation() to prevent a child click from triggering a parent handler.
10. Create a login toggle using useState and event handler functions.

25. Quick Revision Checklist

• Understand React event handling and event handler functions.
• Learn how to use onClick, onChange, and onSubmit.
• Know the difference between passing and calling a function.
• Practice passing arguments with arrow functions.
• Understand the event object and its methods.
• Learn how event handlers update component state.
• Understand how callbacks can be passed through props.
• Learn event propagation and default browser behavior.
• Build practical projects to strengthen your skills.

26. Conclusion

Event Handling with Functions is an essential React JS concept that enables developers to build interactive applications. By defining event handler functions, connecting them to JSX elements, passing arguments, updating state, and managing event propagation, developers can create responsive and reusable user interfaces. Practicing these techniques provides a strong foundation for advanced React development.

Continue learning with JustAcademy React JS Training and explore the course through Register for React JS Course Demo.

Official React Reference

Read the official guide: Responding to Events in React.