How React event handling works

Handling Events in React

React wraps native browser events in a SyntheticEvent — a cross-browser wrapper that normalizes event properties. You handle events by passing functions as JSX props.

Common Event Handlers

function Form() {
  function handleClick(e) {
    console.log('Button clicked', e.target);
  }

  function handleChange(e) {
    console.log('Input value:', e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault(); // stop page reload
    console.log('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button onClick={handleClick}>Submit</button>
    </form>
  );
}

Passing Arguments to Handlers

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];

  function handleSelect(item) {
    console.log('Selected:', item);
  }

  return (
    <ul>
      {items.map(item => (
        <li key={item} onClick={() => handleSelect(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

Pass a function reference to event props, not a function call. onClick={handleClick} is correct. onClick={handleClick()} runs the function immediately on render.

Use e.preventDefault() for forms and links to stop default browser behavior.