Handling Events ⚛️

1. Click Events & Handler Functions

An event is something the user does — a click, a keypress, a form submit. An event handler is a function you write that runs in response. In React you attach one with a camelCase prop like onClick (not the lowercase onclick from HTML), and you pass the function by name. The golden rule: onClick={handleClick} — no parentheses. The parentheses would call the function immediately; you want to hand the function to React so it can call it on each click.

function LikeButton() {
  // 1) Define the handler — a plain function that does the work.
  function handleClick() {
    alert("You liked this post!");
  }

  // 2) Pass the function BY NAME — no parentheses.
  //    React will call handleClick FOR you when the button is clicked.
  return <button onClick={handleClick}>Like</button>;
}

Read the worked example below. The handleLike function is exactly what you'd pass to onClick — here we call it three times to simulate three clicks and watch the count climb.

// React calls your handler. Here we run the SAME handler logic in plain JS
// so you can see exactly what happens each time a "click" fires.

let likeCount = 0;

// This is the kind of function you'd pass to onClick={...}
function handleLike() {
  likeCount = likeCount + 1;
  console.log("Liked! Total likes: " + likeCount);
}

// Simulate three clicks. In React, the runtime calls handleLike for you.
handleLike();   // Liked! Total likes: 1
handleLike();   // Liked! Total likes: 2
handleLike(); 
...

// ❌ WRONG — handleClick() runs the MOMENT the component renders,
//    not when you click. The return value (undefined) becomes the handler.
<button onClick={handleClick()}>Like</button>

// ✅ RIGHT — pass the function itself. React calls it on each click.
<button onClick={handleClick}>Like</button>

// ✅ ALSO RIGHT — wrap it in an arrow function when you need to
//    pass an argument (see section 2).
<button onClick={() => handleClick("post-42")}>Like</button>

Now you try. Finish the handler and "click" the button by calling it.

// 🎯 YOUR TURN — fill in the blanks marked ___ then press "Try it Yourself".

let count = 0;

// 1) Finish this handler so it adds 1 to count and logs the new total.
function handleIncrement() {
  count = ___;                       // 👉 count + 1
  console.log("Count is now: " + count);
}

// In React you would write:  <button onClick={handleIncrement}>+1</button>
// Notice: NO parentheses — you pass the function, you don't call it.

// 2) "Click" the button three times by calling the handler 
...

2. Passing Arguments to Handlers

What if your handler needs data — like which item to delete? You can't write onClick={deletePost(id)} because, as you just learned, that calls deletePost immediately during render. The fix is an arrow wrapper: onClick={() => deletePost(id)}. The arrow function is the handler; it sits and waits, and only calls deletePost(id) when the click actually happens.

{posts.map((id) => (
  <button key={id} onClick={() => deletePost(id)}>
    Delete #{id}
  </button>
))}

// Passing arguments: wrap the call in an arrow function () => fn(arg).
// The arrow function is the handler; it calls deletePost WHEN clicked.

function deletePost(id) {
  console.log("Deleting post #" + id);
}

const posts = [101, 102, 103];

// In JSX you'd write:  onClick={() => deletePost(id)}
// Here we build those arrow handlers and call them to prove they work.
posts.forEach((id) => {
  const handler = () => deletePost(id);   // the wrapper React would store
  handler();                 
...

3. The Event Object & onChange

When React calls your handler, it passes one argument: the event object. React calls it a SyntheticEvent — a cross-browser wrapper around the native DOM event, so the same properties work in every browser. The one you'll use constantly is e.target.value: the current text of an input. The onChange event fires on every keystroke, which is how you keep React state in sync with what the user types (a controlled component).

// The event object (React calls it a SyntheticEvent) is passed to your
// handler automatically. It's a cross-browser wrapper around the real
// DOM event, with the same properties everywhere.

// Pretend React handed us this event from typing "Hi" in a text box:
const fakeEvent = {
  type: "change",
  target: { value: "Hi", name: "username" },
  preventDefault() { console.log("(default behaviour prevented)"); },
};

// In an onChange handler you read the typed text from e.target.value:
functio
...

In real JSX, that handler wires an input to state like this:

function SearchBar() {
  const [query, setQuery] = useState("");

  // e.target.value is whatever the user has typed so far.
  function handleChange(e) {
    setQuery(e.target.value);
  }

  return (
    <input
      type="text"
      value={query}              // controlled: React owns the value
      onChange={handleChange}    // runs on EVERY keystroke
      placeholder="Search..."
    />
  );
}

4. Forms & preventDefault()

Forms have a built-in browser behaviour: submitting one reloads the page. In a React app that's a disaster — a reload throws away all your state and re-fetches everything. So in your onSubmit handler you call e.preventDefault() as the very first line. That cancels the default reload and lets you handle the submit in JavaScript instead. Put it on <form onSubmit={...}>, not the button — that way pressing Enter inside the form works too.

function SearchForm() {
  const [query, setQuery] = useState("");

  function handleSubmit(e) {
    e.preventDefault();          // ⛔ stop the browser reloading the page
    console.log("Searching for:", query);
    // ...send the search request here...
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
}

// onSubmit fires when a form is submitted (button click OR Enter key).
// By default the browser RELOADS the page — which wipes your React state.
// e.preventDefault() stops that so YOU handle the submit in JavaScript.

function handleSubmit(e) {
  e.preventDefault();                 // without this, the page reloads
  console.log("Form handled in JS — no reload!");
  console.log("Query:", e.target.query);
}

// Simulate the event React would pass to onSubmit:
const submitEvent = {
  target: { 
...

Your turn — complete the submit handler so the page is never reloaded and the typed email is logged.

// 🎯 YOUR TURN — complete the form submit handler.

const event = {
  target: { value: "alice@example.com" },
  preventDefault() { console.log("(page reload stopped)"); },
};

function handleSubmit(e) {
  // 1) Stop the browser from reloading the page.
  ___;                          // 👉 e.preventDefault()

  // 2) Read what the user typed and log it.
  const email = ___;            // 👉 e.target.value
  console.log("Signing up: " + email);
}

handleSubmit(event);

// ✅ Expected output:
//  
...

// 🎯 MINI-CHALLENGE: A toggle handler
//
// Imagine a "Show / Hide" button. You'll write the handler logic.
//
// 1. Create a variable "isOpen" set to false.
// 2. Write a function toggle() that flips isOpen (true -> false -> true)
//    and logs:  "Panel is now: open"  or  "Panel is now: closed".
//    Hint: isOpen = !isOpen;  flips a boolean.
// 3. In React you'd attach it with:  <button onClick={toggle}>Toggle</button>
//    Here, "click" the button by calling toggle() three times.
//
// ✅ E
...