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