On routes/index.tsx I have:
import { PageProps } from "$fresh/server.ts";
import Test from "../islands/Test.tsx";
export default function App(prop: PageProps) {
const a = {
a: "a",
b: function () {
return "b";
},
};
return (
<body>
<Test a={a} />
</body>
);
}
And on islands/test.tsx I have:
import { useState } from "preact/hooks";
export default function Test({ a }: any) {
const [keyword, setKeyword] = useState("");
return (
<div>
<input
type="text"
value={keyword}
onInput={(e) => setKeyword((e.target as HTMLTextAreaElement).value)}
/>
<br />
{keyword}
{a.a}
</div>
);
}
This works. However, if I'm not using {a.a} but {a.b()}, then useState() stops working. Why is that? The docs doesn't say anything about this.
I put console.log('handler') in the input handler, and console.log('function body') in the function body. I got one function body when the server load, one function body when the client load, and none handler when I trigger the event.
I use Deno Fresh, which uses Preact. In Preact, onInput is used instead of onChange.