Code Secure Academy Code Secure Academy

← React tutorial

React

Handling Events

React event handlers are camelCase props — onClick, onChange, onSubmit — set to a function that runs whenever that event fires.

Example: reading what's typed into a field

import { useState } from "react";

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

  function handleChange(e) {
    setQuery(e.target.value);
  }

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

e (the event object) is passed automatically to every handler; e.target is the actual DOM element the event happened on, and .value is its current text. Notice this example pairs the event handler with useState from the previous lesson — reading input and storing it in state together is exactly the pattern behind essentially every form in a real React app.

Example
function SearchBox() {
  function handleChange(e) {
    console.log("You typed:", e.target.value);
  }

  return <input type="text" onChange={handleChange} placeholder="Search..." />;
}
Output
Logs "You typed: <current value>" to the console every time the input changes.
← Side Effects with useEffect Conditional Rendering →