BubblesB
Denoβ€’9mo agoβ€’
2 replies
Bubbles

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>
  );
}

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>
  );
}

I genuinely cannot figure this out. Any help or clue's are appreciated.
Was this page helpful?