// src/components/ReactCounter.jsx
import { useState } from 'react';

export default function ReactCounter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

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

<ReactCounter initialCount={5} client:load />

<!--
  Notes:
  - initialCount={5} is a plain number, real serializable data, so it
    crosses the Astro-to-React boundary correctly and the counter
    starts at 5.
  - client:load is still required for the button to be interactive
    at all - the prop being passed correctly doesn't imply hydration
    happens automatically.
-->