| 1 | "use client"; |
| 2 | |
| 3 | import { useState } from "react"; |
| 4 | |
| 5 | export function Counter() { |
| 6 | const [count, setCount] = useState(0); |
| 7 | const [greeting, setGreeting] = useState(""); |
| 8 | |
| 9 | async function loadGreeting() { |
| 10 | try { |
| 11 | const response = await fetch("/api/hello?name=browser"); |
| 12 | if (!response.ok) throw new Error(`HTTP ${response.status}`); |
| 13 | const body = (await response.json()) as { greeting: string }; |
| 14 | setGreeting(body.greeting); |
| 15 | } catch { |
| 16 | setGreeting("Could not load the greeting. Try again."); |
| 17 | } |
| 18 | } |
| 19 | |
| 20 | return ( |
| 21 | <section className="mt-4 flex flex-col gap-2"> |
| 22 | <button type="button" onClick={() => setCount((value) => value + 1)}> |
| 23 | count: {count} |
| 24 | </button> |
| 25 | <button type="button" onClick={loadGreeting}> |
| 26 | Load greeting |
| 27 | </button> |
| 28 | <p role="status">{greeting}</p> |
| 29 | </section> |
| 30 | ); |
| 31 | } |