// WRONG — a function prop passed from Astro's frontmatter
// does not survive the serialization boundary:
//
// ---
// function handleClick() { alert('clicked'); }
// ---
// <ReactButton onClick={handleClick} client:load />
//
// This fails because handleClick is a function, not serializable
// data, and Astro's frontmatter isn't running in the browser anyway
// — there's no live function reference to hand across the boundary.

// CORRECT — src/components/ReactButton.jsx
import { useState } from 'react';

export default function ReactButton() {
  const [clicked, setClicked] = useState(false);

  function handleClick() {
    setClicked(true);
  }

  return (
    <button onClick={handleClick}>
      {clicked ? 'Clicked!' : 'Click me'}
    </button>
  );
}

---
// src/pages/index.astro
import ReactButton from '../components/ReactButton.jsx';
---

<ReactButton client:load />

<!--
  Notes:
  - handleClick is defined and lives entirely inside ReactButton
    itself, in real client-side React code that only exists once the
    component is hydrated in the browser.
  - Astro's own frontmatter runs on the server (or at build time) and
    has no live JavaScript function it could hand across to a
    browser-side component - only plain, serializable data survives
    that boundary as a prop.
-->