📘 React Mastery Series — Day 22

Handling Events in React — Clean & Scalable Event Logic

User interaction is the heart of every application.

• Clicking buttons

• Submitting forms

• Typing in inputs

• Hover effects

• Keyboard actions

All of this works using Event Handling in React.

---

🤔 What is Event Handling?

Event Handling in React allows us to respond to user actions like clicks, changes, submissions, etc.

React events are very similar to JavaScript events — but written in camelCase.

---

🧠 Basic Example — Button Click

function ClickExample() {
  const handleClick = () => {
    alert("Button Clicked!");
  };

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

✔ onClick is camelCase

✔ We pass function reference (not function call)

Correct:

onClick={handleClick}

Wrong:

onClick={handleClick()}

---

🧠 Passing Arguments to Events

Sometimes we need to send data.

function UserGreeting() {
  const greetUser = (name) => {
    alert(`Hello ${name}`);
  };

  return (
    <button onClick={() => greetUser("Shailaja")}>
      Greet
    </button>
  );
}

We use arrow function to pass arguments.

---

🧠 Handling Input Change

Very common in forms.

import { useState } from "react";

function InputExample() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

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

✔ e.target.value gives input value

✔ Used in Controlled Components

---

🧠 Form Submission Event

function FormExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert("Form Submitted!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Important:

👉 e.preventDefault() prevents page reload.

---

🧠 Common React Events

Event	Usage
onClick	Button click
onChange	Input change
onSubmit	Form submit
onMouseEnter	Hover
onKeyDown	Keyboard press

---

🎯 Best Practices

✔ Keep event logic separate from JSX

✔ Avoid writing complex logic inline

✔ Use meaningful function names

✔ Reuse handlers when possible

Clean example:

const handleLogin = () => {
  // login logic
};

<button onClick={handleLogin}>Login</button>

---

🧠 Interview One-Liner

React handles events using camelCase event handlers and function references to respond to user interactions efficiently.

---

🔗 How It Connects

✔ Forms (Day 18)

✔ Conditional Rendering (Day 20)

✔ Lists & Keys (Day 21)

✔ Lifting State (Day 19)

Events are how users interact with your state.

---

✅ Key Takeaways

✔ React uses camelCase event names

✔ Always pass function reference

✔ Use preventDefault for forms

✔ Keep logic clean and organized

---

🔜 Coming Next

Day 23 — Refs Forwarding & Advanced useRef Patterns

Now we enter slightly advanced territory 🔥