Handling Events in React

Difficulty: Beginner

Event handling in React is similar to handling events in plain HTML/JavaScript, but with some syntactic differences. In HTML, you write `onclick="handleClick()"` as a string attribute. In React JSX, you write `onClick={handleClick}` - the event name is camelCase, and you pass a function reference (not a string). This is a fundamental part of making React components interactive.

The most common events you will work with are `onClick` for buttons and clickable elements, `onChange` for input fields, selects, and textareas, and `onSubmit` for forms. React supports all standard DOM events with the same camelCase naming convention: `onMouseEnter`, `onKeyDown`, `onFocus`, `onBlur`, `onScroll`, and many more. Each event handler receives a SyntheticEvent object as its argument.

There are two common patterns for defining event handlers. The first is defining a named function and passing its reference: `function handleClick() { ... }` then `<button onClick={handleClick}>`. The second is using inline arrow functions: `<button onClick={() => console.log('clicked')}>`. Named functions are preferred for readability and because they can be reused. Inline functions are convenient for simple one-liners or when you need to pass arguments.

A critical distinction is between passing a function reference and calling a function. `onClick={handleClick}` passes the function to be called later when the event occurs. `onClick={handleClick()}` calls the function immediately during rendering and passes its return value as the handler - this is almost always a bug. If you need to pass arguments, use an arrow function wrapper: `onClick={() => handleClick(id)}`.

Event handlers in React follow a naming convention: handler functions are typically named `handleX` where X describes the event (handleClick, handleChange, handleSubmit). When passed as props, they are named `onX` (onClick, onChange, onSubmit). This convention makes code easy to read: `<Button onClick={handleClick} />` clearly shows that clicking the Button triggers handleClick.

Code examples

Basic Event Handler Patterns

// Pattern 1: Named function handler
function handleClick() {
  console.log('Button clicked!');
}

// Pattern 2: Inline arrow function
const handleHover = () => {
  console.log('Mouse entered!');
};

// Simulating event triggers
handleClick();  // Like clicking a button
handleHover();  // Like hovering over an element

// Pattern 3: Handler with event object
function handleChange(event) {
  console.log('Value changed to: ' + event.target.value);
}

// Simulating an onChange event
handleChange({ target: { value: 'Hello React' } });

Event handlers are plain functions. Named functions are preferred for readability. Each handler receives an event object with details about what triggered the event.

Function Reference vs Function Call

function handleClick() {
  console.log('Clicked!');
  return 'done';
}

// CORRECT: Pass reference - function runs when event occurs
const correctHandler = handleClick;
console.log('Type of correct handler: ' + typeof correctHandler);

// WRONG: Calling immediately - runs during render!
const wrongHandler = handleClick();  // This runs NOW
console.log('Type of wrong handler: ' + typeof wrongHandler);

// CORRECT with arguments: Wrap in arrow function
function handleDelete(id) {
  console.log('Deleting item: ' + id);
}
const deleteHandler = () => handleDelete(42);
deleteHandler();

Pass `handleClick` (reference) not `handleClick()` (call). To pass arguments, wrap in an arrow function: `() => handleClick(arg)`.

Common Event Types

// onClick - buttons, links, any clickable element
function handleButtonClick() {
  console.log('onClick: Button pressed');
}

// onChange - input, select, textarea
function handleInputChange(event) {
  console.log('onChange: ' + event.target.value);
}

// onSubmit - form submission
function handleFormSubmit(event) {
  event.preventDefault();
  console.log('onSubmit: Form submitted');
}

// Simulate events
handleButtonClick();
handleInputChange({ target: { value: 'React' } });
handleFormSubmit({ preventDefault: () => {} });

onClick handles clicks, onChange handles input value changes, and onSubmit handles form submissions. Each receives a synthetic event object.

Key points

Concepts covered

onClick, onChange, event handlers, event handler functions, inline handlers