Handling User Events

Responding to Clicks: The onClick Handler

The most fundamental user interaction is a click. In React, you attach a click listener to an element using the onClick prop. Note the camelCase syntax, which is standard for all event props in JSX.

The value you pass to onClick must be a function reference, not a function call. React will execute this function for you when the user clicks the element.

Let's see this in action. The following video provides a concise and practical guide to the most common event handlers.

As the video explained, the process is straightforward:

1. Define a handler function: Create a function inside your component that contains the logic you want to run. By convention, these are often named with a handle prefix, like handleClick or handleLogin.
2. Pass it to the event prop: Assign your function to the onClick prop in your JSX, wrapped in curly braces.

Here’s a quick example:

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

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

Important: If you write onClick={handleClick()}, you are calling the function during rendering. This will likely cause an error or unexpected behavior. You must pass the function itself: onClick={handleClick}.

Handling Form Submissions: onSubmit and preventDefault

When working with forms, the default browser behavior is to reload the page on submission. In a Single-Page Application (SPA) like one built with React, this is almost never what you want. We need to prevent this default action.

The onSubmit event handler is attached to the <form> element itself, not the submit button. Your handler function will automatically receive an event object, which is React's "Synthetic Event" wrapper around the native browser event. You can call event.preventDefault() on this object, just as you would in vanilla JavaScript.

Here's the pattern in code:

function MyForm() {
  function handleSubmit(event) {
    // Prevent the default page reload
    event.preventDefault(); 
    
    console.log("Form submitted!");
    // Later, you would add logic here to send data to an API
  }

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

Capturing User Input: onChange and Controlled Components

Handling inputs is where React's interactivity truly comes alive. To capture what a user types into an <input>, <textarea>, or selects in a <select>, we use the onChange event handler. This handler's event object gives us access to the input's current value via event.target.value.

But just capturing the value isn't enough. To make the input interactive, we need to store this value and tell the input to display it. This creates a "controlled component"—an input whose value is controlled by React state.

This touches on the useState hook, which is the main topic of our next module. For now, think of useState as a way to give our component memory.

const [name, setName] = useState(''); gives us two things:

1. name: A variable to hold our state (the input's value).
2. setName: A function to update that state.

Let's see how these pieces fit together.

The flow for a controlled component is a fundamental React pattern:

1. User types in the input.
2. The onChange event fires on the <input> element.
3. The handler function is called (e.g., handleNameChange).
4. Inside the handler, we call the state updater function (setName) with the new value from event.target.value.
5. React re-renders the component with the new state.
6. The <input>'s value prop is now set to the updated name state, and the user sees their change on the screen.

Here is the complete code for a controlled input:

import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

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

  return (
    <form>
      <label>Name: </label>
      <input value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </form>
  );
}

This pattern ensures that the React state is always the "single source of truth" for the input's value.

Practice: Building an Interactive Search Form

Let's combine what we've learned. We'll create a simple search form.

1. Create a new component file named src/components/SearchForm.jsx.
2. Build the component using useState to control the input's value and an onSubmit handler to process the search.

// src/components/SearchForm.jsx
import { useState } from 'react';

export default function SearchForm() {
  const [searchTerm, setSearchTerm] = useState('');

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

  function handleSubmit(event) {
    event.preventDefault();
    // In a real app, you'd trigger a search here.
    // For now, we'll just alert the term.
    alert(`You searched for: "${searchTerm}"`);
    // Clear the input after submission
    setSearchTerm('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="search-input">Search: </label>
      <input 
        id="search-input"
        value={searchTerm} 
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

3. Import and render <SearchForm /> in your App.jsx file to see it in action.

This small exercise reinforces handling form submissions, creating controlled inputs, and managing state—three core skills you'll use constantly.

Conclusion

You've made a huge leap forward today! Your components can now listen and respond to user actions. This is the key that unlocks the ability to build complex, interactive web applications.

Key Takeaways:

• Event Handlers in JSX: Use camelCase props like onClick, onChange, and onSubmit.
• Function References: Always pass the handler function itself (e.g., {handleClick}) to the prop, don't call it ({handleClick()}).
• Preventing Default Behavior: In onSubmit handlers, use event.preventDefault() to stop the browser from reloading the page.
• Controlled Components: The standard React pattern for handling inputs is to use useState to manage the input's value. The component's state is the single source of truth.
• The event Object: Event handlers receive a synthetic event object, which provides information about the event, like event.target.value for inputs.

Preview of Next Lesson:
We've had a taste of useState today. In the first lesson of our next module, "State Management and Forms in React," we will dive deep into the useState hook. You'll learn how to properly manage and update a component's local state, handle more complex state updates, and build robust forms, setting the stage for creating the e-commerce features you're aiming for.