Frontend Engineering | VoidX Academy

23. Events

Reacting to the User

Web applications are interactive. Users click buttons, type in search bars, and submit forms. In standard JavaScript, you use addEventListener. In React, we attach event handlers directly to the JSX elements using camelCase props.

Attaching Event Handlers

React events are written in camelCase (onClick, onChange, onSubmit). You pass a function reference to the event handler, not a string.

export default function App() {
  // 1. Define the handler function
  const handleClick = () => {
    alert("You clicked the button!");
  };

  return (
    <div>
      {/* 2. Pass the function REFERENCE (do not add parentheses!) */}
      <button onClick={handleClick}>Click Me</button>
      
      {/* You can also write it inline using an arrow function */}
      <button onClick={() => alert('Inline click!')}>Inline Click</button>
    </div>
  );
}

The Crucial Mistake: Passing vs Executing

A very common beginner mistake is writing onClick={handleClick()}. Notice the parentheses. This tells JavaScript to execute the function immediately when the component renders, instead of waiting for the user to click. You must pass the function reference (no parentheses) or wrap it in an arrow function.

The Event Object (e)

When an event fires, React automatically passes an "Event Object" to your handler function. This object contains massive amounts of useful data, like what the user just typed into a text input.

import { useState } from 'react';

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

  // 'e' stands for the Event object
  const handleChange = (e) => {
    // e.target is the input element. .value is what the user typed.
    setQuery(e.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleChange} />
      <p>You are searching for: {query}</p>
    </div>
  );
}

Preventing Default Behavior

Some HTML elements have default behaviors. For example, submitting an HTML <form> will automatically refresh the entire browser page. In a React Single Page Application, a page refresh destroys all your state! You must stop it.

export default function LoginForm() {
  const handleSubmit = (e) => {
    // THIS IS CRITICAL: Stops the browser from reloading the page
    e.preventDefault();
    console.log("Form submitted safely!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" required />
      <button type="submit">Log In</button>
    </form>
  );
}

23. Events

Reacting to the User

Attaching Event Handlers

React events are written in camelCase (onClick, onChange, onSubmit). You pass a function reference to the event handler, not a string.

export default function App() {
  // 1. Define the handler function
  const handleClick = () => {
    alert("You clicked the button!");
  };

  return (
    <div>
      {/* 2. Pass the function REFERENCE (do not add parentheses!) */}
      <button onClick={handleClick}>Click Me</button>
      
      {/* You can also write it inline using an arrow function */}
      <button onClick={() => alert('Inline click!')}>Inline Click</button>
    </div>
  );
}

The Crucial Mistake: Passing vs Executing

The Event Object (e)

When an event fires, React automatically passes an "Event Object" to your handler function. This object contains massive amounts of useful data, like what the user just typed into a text input.

import { useState } from 'react';

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

  // 'e' stands for the Event object
  const handleChange = (e) => {
    // e.target is the input element. .value is what the user typed.
    setQuery(e.target.value);
  };

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleChange} />
      <p>You are searching for: {query}</p>
    </div>
  );
}

Preventing Default Behavior

export default function LoginForm() {
  const handleSubmit = (e) => {
    // THIS IS CRITICAL: Stops the browser from reloading the page
    e.preventDefault();
    console.log("Form submitted safely!");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" required />
      <button type="submit">Log In</button>
    </form>
  );
}

23. Events

Reacting to the User

Attaching Event Handlers

The Crucial Mistake: Passing vs Executing

The Event Object (e)

Preventing Default Behavior

Knowledge Check

23. Events

Reacting to the User

Attaching Event Handlers

The Crucial Mistake: Passing vs Executing

The Event Object (e)

Preventing Default Behavior

Knowledge Check