React Event Handling

In React, events are handled similarly to DOM events in plain JavaScript, but with a few key differences that make them more powerful and consistent across browsers.

What are React Events?

In React, events are just like HTML DOM events (like click, submit, change, etc.), but they're handled a bit differently.

Instead of using lowercase (like in HTML: onclick), React uses camelCase (onClick). And instead of using strings, you pass a function.

A React Event is an object that represents an interaction from the user, like:

Clicking a button (onClick)
Typing into an input (onChange)
Submitting a form (onSubmit)
Moving the mouse (onMouseMove)
Focusing or blurring a field (onFocus, onBlur)

Handling Click Event

function ClickButton() {
  function handleClick() {
    alert('Button was clicked!');
  }

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

export default ClickButton;

onClick={handleClick} – Tells React to call the handleClick function when the button is clicked.
No need to use addEventListener. React handles it behind the scenes.

Handling Input Change Event

import React, { useState } from 'react';

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

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

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

export default InputBox;

onChange={handleChange} – React calls this function when the input changes.
event.target.value – Gives the current text inside the input.

What is SyntheticEvent?

In React, every event you use (like onClick, onChange) gets passed a special object called SyntheticEvent — it wraps the browser's native event for cross-browser consistency.

event.target.value // for input
event.type         // type of event (e.g., "click")

import React, { useState } from 'react';

function EventExample() {
  const [text, setText] = useState('');
  const [message, setMessage] = useState('');

  function handleClick() {
    setMessage('You clicked the button!');
  }

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

  function handleSubmit(event) {
    event.preventDefault(); // stops the page from refreshing
    setMessage(`Form submitted with: ${text}`);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={text} onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
      <button onClick={handleClick}>Just Click</button>
      <p>{message}</p>
    </div>
  );
}

export default EventExample;

onChange – Updates text as you type.
onClick – Reacts to button click.
onSubmit – Handles form submission.
event.preventDefault() – Stops the form from refreshing the page.

Summary

React uses camelCase for event names (onClick, onSubmit, etc.)
Event handlers are passed as functions
React wraps native events in a SyntheticEvent
Prevent default browser behavior using e.preventDefault()