function MultipleEvents() {
  const [log, setLog] = useState([]);

  const addLog = (msg) =>
    setLog((prev) => [msg, ...prev.slice(0, 4)]);

  return (
    <div>
      <input
        onFocus={() => addLog('Input focused')}
        onBlur={() => addLog('Input blurred')}
        onChange={(e) => addLog(`Value: ${e.target.value}`)}
        onKeyDown={(e) => addLog(`Key: ${e.key}`)}
        placeholder="Type something..."
      />
      <button
        onMouseEnter={() => addLog('Mouse entered button')}
        onMouseLeave={() => addLog('Mouse left button')}
        onClick={() => addLog('Button clicked!')}
        onDoubleClick={() => addLog('Double clicked!')}
      >
        Interact with me
      </button>
      <ul>{log.map((l, i) => <li key={i}>{l}</li>)}</ul>
    </div>
  );
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };

    // Method 1: Bind in constructor (recommended for classes)
    this.handleIncrement = this.handleIncrement.bind(this);
  }

  handleIncrement() {
    this.setState({ count: this.state.count + 1 });
  }

  // Method 2: Class field (arrow function — auto-binds this)
  handleDecrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>

        {/* Method 1: constructor-bound */}
        <button onClick={this.handleIncrement}>+</button>

        {/* Method 2: class field arrow */}
        <button onClick={this.handleDecrement}>−</button>

        {/* Method 3: inline bind (creates new fn every render) */}
        <button onClick={this.handleIncrement.bind(this)}>Also +</button>
      </div>
    );
  }
}

function ItemList() {
  const items = [
    { id: 1, name: 'Web Design' },
    { id: 2, name: 'SEO' },
    { id: 3, name: 'Performance Marketing' },
  ];

  // Handler receives the custom argument AND the event object
  const handleSelect = (id, name, event) => {
    event.preventDefault();
    console.log(`Selected: ${name} (ID: ${id})`);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <button
            {/* Wrap in arrow fn to pass extra args */}
            onClick={(e) => handleSelect(item.id, item.name, e)}
          >
            Select {item.name}
          </button>
        </li>
      ))}
    </ul>
  );
}

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // Stops page reload — REQUIRED in React

    // return false; ← This does NOT work in React!

    console.log('Logging in:', email, password);
    // Call your API here...
  };

  const handleLinkClick = (e) => {
    e.preventDefault(); // Prevents navigation
    console.log('Link clicked — handled in JS');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
      <a href="/forgot" onClick={handleLinkClick}>Forgot password?</a>
    </form>
  );
}

function PropagationDemo() {
  const handleParent = () => console.log('Parent clicked (bubbled)');
  const handleChild = (e) => {
    e.stopPropagation(); // Prevents event reaching parent
    console.log('Child clicked — stopped here');
  };

  // Capture phase: fires top → down (before bubbling)
  const handleCapture = () => console.log('Captured at parent (top-down)');

  return (
    <div
      onClick={handleParent}
      onClickCapture={handleCapture} {/* fires first */}
      style={{ padding: '20px', background: '#EBF4FF' }}
    >
      Parent (click me too)
      <button onClick={handleChild}>
        Child (stops propagation)
      </button>
    </div>
  );
}

/* Propagation order when you click the button:
   1. onClickCapture (parent) — capture phase, top-down
   2. onClick (child)         — target phase
   3. stopPropagation()       — bubbling STOPPED
   4. handleParent            — NOT called
*/

import { useState } from 'react';

function CourseEnrollment() {
  const [enrolled, setEnrolled] = useState(false);
  const [count, setCount] = useState(0);
  const [search, setSearch] = useState('');

  // Toggle boolean state
  const toggleEnroll = () => setEnrolled((prev) => !prev);

  // Functional update for reliable counter (avoids stale closure)
  const increment = () => setCount((prev) => prev + 1);

  // Controlled input — onChange syncs every keystroke
  const handleSearch = (e) => setSearch(e.target.value);

  return (
    <div>
      <button onClick={toggleEnroll}>
        {enrolled ? 'Unenroll' : 'Enroll Now'}
      </button>

      <button onClick={increment}>
        Lesson: {count}
      </button>

      <input
        type="text"
        value={search}
        onChange={handleSearch}
        placeholder="Search courses..."
      />
      <p>Searching: {search}</p>
    </div>
  );
}

import { useState, useCallback } from 'react';

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');

  // useCallback prevents re-creating this fn on every render
  // Useful when passing handlers to memoized child components
  const handleChange = useCallback((e) => {
    const val = e.target.value;
    setQuery(val);
    onSearch(val);
  }, [onSearch]); // Re-create only if onSearch changes

  return (
    <input
      value={query}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

import { useRef } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);

  const handleFocusClick = () => {
    inputRef.current.focus(); // Directly access DOM node
    inputRef.current.select(); // Select all text
  };

  return (
    <div>
      <input ref={inputRef} defaultValue="7Scribes" />
      <button onClick={handleFocusClick}>
        Focus & Select Input
      </button>
    </div>
  );
}

import { useState, useEffect } from 'react';

function KeyboardShortcuts() {
  const [lastKey, setLastKey] = useState('');

  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log('Save shortcut!');
      }
      setLastKey(e.key);
    };

    // Attach global listener
    window.addEventListener('keydown', handleKeyDown);

    // IMPORTANT: Clean up to avoid memory leaks
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []); // Empty array = runs once on mount

  return <p>Last key pressed: {lastKey || 'None'}</p>;
}

import { useState, useEffect } from 'react';

// Reusable custom hook for detecting key presses
function useKeyPress(targetKey) {
  const [pressed, setPressed] = useState(false);

  useEffect(() => {
    const onDown = ({ key }) => key === targetKey && setPressed(true);
    const onUp = ({ key }) => key === targetKey && setPressed(false);

    window.addEventListener('keydown', onDown);
    window.addEventListener('keyup', onUp);

    return () => {
      window.removeEventListener('keydown', onDown);
      window.removeEventListener('keyup', onUp);
    };
  }, [targetKey]);

  return pressed;
}

// Usage
function App() {
  const enterPressed = useKeyPress('Enter');
  return <p>Enter key: {enterPressed ? 'Pressed' : 'Released'}</p>;
}