Bubbles•2mo 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.•2mo ago

You cannot pass functions from the server to the browser. You're passing a JS function to the toggle prop of MyButton.

BubblesOP•2mo 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 😅

Fresh: `toggle` is not a function.

Did you find this page helpful?