Reacting to the User: onClick, onChange, & onSubmit Events

Bring your components to life by learning how to handle clicks, input changes, and form submissions—the building blocks of interactive web apps.

👋

Welcome! Let's see how to make React components respond to user actions using events.

/* Let's begin... */

The Click Event: onClick

The onClick event is your go-to for handling clicks on elements like buttons, divs, or any other component. You assign a function (an "event handler") that runs whenever the user clicks that element.

Capturing Input: onChange

For form elements like <input>, <textarea>, and <select>, the onChange event fires every time the value changes. It's crucial for capturing user input in real-time and updating the component's state, a pattern known as a "controlled component."

Handling Forms: onSubmit

The onSubmit event is specifically for the <form> element. It triggers when the form is submitted, typically by clicking a submit button. It's essential to call event.preventDefault() inside the handler to stop the default browser behavior of a full page reload.

The 'event' Object

React wraps the browser's native event in a SyntheticEvent object. This provides a consistent API across all browsers. For an onChange event, you'll commonly use event.target.value to get the current value of the input field.

Practice Zone

Interactive Test 1: Match the Event

Drag the correct event handler to its corresponding JSX element.

Arrastra en el orden correspondiente.

Arrastra las opciones:

onClick

onChange

onSubmit

Completa el código:

Unlock with Premium

Interactive Test 2: Complete the Form

Rellena los huecos en cada casilla.

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Submitted!');
  };

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

Unlock with Premium

Practice Example: Live Input

Create a component with an input field and a paragraph. As you type in the input, the text should appear in the paragraph in real-time.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

import React, { useState } from 'react';

function LiveTyping() {
  const [text, setText] = useState('');

  return (
    <div>
      <input 
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type here..."
      />
      <p>You are typing: {text}</p>
    </div>
  );
}

Unlock with Premium

Knowledge Check

To prevent a form from reloading the page upon submission, what should you call inside your onSubmit handler?

Unlock with Premium

The Core Loop of Interactivity

Events are the bridge between your user and your application's state. Understanding this connection is key to building dynamic React apps.

1. The State Update Flow

Every interactive feature follows this pattern: a user performs an action (like a click), triggering an event. The event handler function is called, which then updates the component's state using a setter function (e.g., `setState`). This state change tells React to re-render the component with the new data.

User Action ➡️ Event ➡️ Handler ➡️ State Update ➡️ UI Re-render

2. Controlled Components: The React Way

In React, form inputs are typically "controlled." This means React state is the single source of truth for the input's value. We link them by setting the input's `value` prop to a state variable and using `onChange` to update that same state variable.

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

<input
  value={name} // Read from state
  onChange={e => setName(e.target.value)}
/>

React state controls this input.

Practical Takeaway: Think of events as messengers. They tell your component *what* happened, and your handler functions decide *how* the component's state should react to that information.

React Events Glossary

Event Handler: A function you provide to be executed in response to a user interaction, such as "handleClick" in `onClick=handleClick`.
SyntheticEvent: A cross-browser wrapper around the browser's native event. It guarantees events have consistent properties across different browsers.
onClick: An event that fires when the user clicks an element.
onChange: An event that fires when the value of a form element (like <input>) has been changed.
onSubmit: An event that fires when a <form> is submitted.
e.preventDefault(): A method of the event object that stops the browser from carrying out its default action (e.g., stopping a form from reloading the page).
e.target.value: A property of the event object that gives you the current value of the element that triggered the event, typically used with `onChange` on inputs.
Controlled Component: A form input element whose value is controlled by React state. The state is the single source of truth.