Lesson 11 — Handling Events in React

Introduction 😊

In real-world applications, users interact with the UI all the time:

• Clicking buttons
• Typing in input fields
• Submitting forms

React handles all these user actions using Events.

In this lesson, you will learn:

• What events are in React
• How React handles events
• Common React events
• Passing arguments to event handlers
• Best practices for beginners

Let’s get started 🚀

What Are Events in React? 🤔

Events are actions performed by the user.

Examples:

• Clicking a button 🖱️
• Typing in a textbox ⌨️
• Hovering over an element
• Submitting a form

React events are similar to JavaScript DOM events, but they follow camelCase naming.

React Event Naming Convention 📌

In React:

• Event names are written in camelCase
• Event handlers are passed as functions

Example:

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

❌ onclick
✅ onClick

Handling Click Events 🖱️

Example: Button Click

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

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

👉 Notice:

• We pass the function name
• We do NOT call the function directly

Inline Event Handlers ⚡

You can also write event handlers inline.

<button onClick={() => alert("Hello React!")}>
  Click Here
</button>

✔ Useful for simple logic
❌ Avoid for complex logic

Handling Input Events ⌨️

React uses onChange for input fields.

import { useState } from "react";

function InputExample() {
  const [text, setText] = useState("");

  return (
    <input
      type="text"
      value={text}
      onChange={(e) => setText(e.target.value)}
    />
  );
}

👉 e.target.value gives the current input value.

Event Object in React 📦

React automatically passes an event object to event handlers.

Example:

function handleChange(event) {
  console.log(event.target.value);
}

👉 This event object contains details about the action.

Passing Arguments to Event Handlers 🔄

Sometimes you need to pass extra values.

Correct Way:

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

function handleClick(number) {
  console.log(number);
}

❌ Avoid calling functions directly:

onClick={handleClick(5)}

Common React Events 📋

Prevent Default Behavior 🚫

For forms, React uses preventDefault().

function handleSubmit(e) {
  e.preventDefault();
  alert("Form submitted");
}

👉 Prevents page reload.

Common Mistakes Beginners Make ❌

• Calling event handlers instead of passing them
• Using lowercase event names
• Forgetting preventDefault()
• Writing too much logic inline

💡 Keep event handlers clean and readable.

Conclusion 🎯

Handling events is essential to make React applications interactive.

Key takeaways:

• React events use camelCase
• Event handlers are passed as functions
• onClick, onChange, and onSubmit are commonly used
• Event object gives access to user actions
• Clean event handling improves code quality

👉 Events connect users with your React application 🔗

Frequently Asked Questions (FAQs) ❓

Are React events same as JavaScript events?

They are similar but follow React’s naming conventions.

Can we pass arguments to event handlers?

Yes, using arrow functions.

Why use preventDefault()?

To stop default browser behavior like page reload.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 12 — Conditional Rendering in React
Displaying UI based on conditions.