REACT107 - Handling Events in React

Handling events is how React applications become interactive.
In this lesson, you will learn how React handles events, how they differ from native JavaScript events, and how to connect them with state updates.

React Events Overview

React events are similar to DOM events, but they use a synthetic event system for consistency across browsers.

Common React events include:

• onClick
• onChange
• onSubmit
• onMouseEnter
• onKeyDown

Event names use camelCase instead of lowercase.

Basic Event Handling

Attach event handlers using JSX attributes.

function Button() {
  function handleClick() {
    console.log("Button clicked");
  }
 
  return <button onClick={handleClick}>Click Me</button>;
}

The function reference is passed, not executed immediately.

Inline Event Handlers

You can also define handlers inline.

<button onClick={() => console.log("Clicked")}>
  Click
</button>

This is useful for small logic but should be avoided for complex operations.

Passing Arguments to Event Handlers

To pass arguments, use an arrow function.

function Item({ id }) {
  function handleSelect(itemId) {
    console.log(itemId);
  }
 
  return <button onClick={() => handleSelect(id)}>Select</button>;
}

Do not call the function directly inside JSX.

Using State with Events

Events are commonly used to update state.

function Counter() {
  const [count, setCount] = useState(0);
 
  function increment() {
    setCount(prev => prev + 1);
  }
 
  return <button onClick={increment}>{count}</button>;
}

This pattern connects user interaction with UI updates.

Handling Input Events

Form inputs use onChange to track user input.

function InputExample() {
  const [value, setValue] = useState("");
 
  function handleChange(e) {
    setValue(e.target.value);
  }
 
  return <input value={value} onChange={handleChange} />;
}

React uses controlled components to manage form data.

Synthetic Events

React wraps native browser events into SyntheticEvent objects.

Advantages:

• Cross-browser compatibility
• Consistent API
• Better performance

Synthetic events behave like native events in most cases.

Preventing Default Behavior

Use preventDefault for forms and links.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("Form submitted");
  }
 
  return <form onSubmit={handleSubmit}></form>;
}

This prevents page reloads in Single Page Applications.

Event Bubbling in React

Events bubble up the component tree by default.

function Parent() {
  return <div onClick={() => console.log("Parent")}>
    <Child />
  </div>;
}
 
function Child() {
  return <button onClick={() => console.log("Child")}>
    Click
  </button>;
}

Clicking the button triggers both events unless propagation is stopped.

Stopping Event Propagation

function Child() {
  function handleClick(e) {
    e.stopPropagation();
    console.log("Only child");
  }
 
  return <button onClick={handleClick}>Click</button>;
}

Use this carefully to avoid unexpected behavior.

Summary

In this lesson, you learned:

• How React handles events
• Common React event types
• Attaching event handlers
• Passing arguments to events
• Updating state through events
• Controlled inputs
• Synthetic events
• Event bubbling and propagation

In the next lesson, we will explore conditional rendering and learn how to display UI dynamically based on state.