Bubbles
Bubbles•7d ago

Fresh: `toggle` is not a function.

I can't seem to figure out why the function toggle is undefined. I'm passing it like other examples on the internet. button.tsx
interface Props {
toggle: () => void;
}

export function MyButton({ toggle }: Props) {
return (
<button
type="button"
onClick={() => toggle()}
>
Toggle
</button>
);
}
interface Props {
toggle: () => void;
}

export function MyButton({ toggle }: Props) {
return (
<button
type="button"
onClick={() => toggle()}
>
Toggle
</button>
);
}
index.tsx
import { useComputed, useSignal } from "@preact/signals";
import { MyButton } from "../islands/Button.tsx";

export default function LandingPage() {
const isLoggingIn = useSignal(true);
const toggle = () => isLoggingIn.value = !isLoggingIn.value;
const text = useComputed(() => isLoggingIn.value ? "Logging In" : "Register");

return (
<div>
<h1>{text}</h1>
<MyButton toggle={toggle} />
</div>
);
}
import { useComputed, useSignal } from "@preact/signals";
import { MyButton } from "../islands/Button.tsx";

export default function LandingPage() {
const isLoggingIn = useSignal(true);
const toggle = () => isLoggingIn.value = !isLoggingIn.value;
const text = useComputed(() => isLoggingIn.value ? "Logging In" : "Register");

return (
<div>
<h1>{text}</h1>
<MyButton toggle={toggle} />
</div>
);
}
I genuinely cannot figure this out. Any help or clue's are appreciated.
2 Replies
marvinh.
marvinh.•7d ago
You cannot pass functions from the server to the browser. You're passing a JS function to the toggle prop of MyButton.
Bubbles
BubblesOP•7d ago
Yeah figured that out later aswell. Thanks! Idk if it's possible but it would be nice if this was a error or warning 😅

Did you find this page helpful?