7. What are React Events?

React Events are the ways we capture user actions on the screen. Whenever a user interacts with the UI, an event is triggered.

onClick: Clicking a button or link.

onChange: Typing into an input field.

onSubmit: Sending form data.

onMouseOver: Hovering over an element.

We use "Event Handlers" (functions) to tell React what to do when these actions happen.

8. React Event Flow

User Action (Click/Type)
↓
Event Triggered
↓
Event Handler Function Runs
↓
React Updates UI (via State)

Example: You click a button → handleClick() runs → an Alert pops up or the text changes.

9. Rules of React Events

Rule 1: camelCase Naming

In HTML it's onclick, but in React we use camelCase: onClick.

Rule 2: Function Reference

Pass the function name, don't call it immediately.

// ✅ Correct
<button onClick={handleClick}>

// ❌ Wrong
<button onClick="handleClick()">

Rule 3: Curly Braces

Use { } to wrap the function name, not quotes.

11. Simple Event Example

function App() {
  function handleClick() {
    alert("Button Clicked!");
  }

  return (
    <div>
      <h1>React Events</h1>
      <button onClick={handleClick}>
        Click Me
      </button>
    </div>
  );
}

export default App;

13. Changing UI via Events

Events are most powerful when they update State.

import { useState } from "react";

function App() {
  const [message, setMessage] = useState("Hello");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("Welcome to React")}>
        Change Text
      </button>
    </div>
  );
}

14. Common React Events

Event	Description	Target Element
`onClick`	Triggered on a mouse click	Button, Div, A
`onChange`	Triggered when value changes	Input, Select, Textarea
`onSubmit`	Triggered when form is sent	Form
`onKeyDown`	Triggered on key press	Input, Body

15. React vs HTML Events

Feature	HTML Events	React Events
Naming	lowercase (onclick)	camelCase (onClick)
Handler	String ("click()")	Function ({click})
Performance	Native DOM	Synthetic Events (Faster)

React uses Synthetic Events to ensure your code works identically across all browsers.

17. Practice Tasks

Task 1: Alert "Hello React" on button click.

Task 2: Change text from "Welcome" to "Hello User".

Task 3: Build Increase/Decrease counter buttons.

Task 4: Input: Type name and display "Hello [Name]".

Challenge: Create a "Secret Message" button that toggles visibility (Show/Hide).

18. Learning Flow

Props → State → Events (Complete)

↓

Next Up: React Hooks (useEffect, etc.) → API Integration