D
Deno

help

How do I rerender my island after a signal change?

Wwedman10/11/2023
Hi there im trying to rerender this sidebar navigation when you toggle it, making it change size and changing the button but nothing really happens! Thx in advance for your input!
import { useSignal } from '@preact/signals';

interface SidebarNavProps {
loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
const isSidebarOpen = useSignal(false);
const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value;
console.log(isSidebarOpen.value);
};

return (
<div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
<button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
{isSidebarOpen ? '←' : '→'}
</button>

<div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
{loggedIn ? (
<>
<a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
<a href="/logout" class="block p-2 text-blue-500">Logout</a>
</>
) : (
<>
<a href="/login" class="block p-2 text-blue-500">Login</a>
<a href="/register" class="block p-2 text-blue-500">Register</a>
</>
)}
</div>
</div>
);
}
import { useSignal } from '@preact/signals';

interface SidebarNavProps {
loggedIn: boolean;
}

export default function SidebarNav({ loggedIn }: SidebarNavProps) {
const isSidebarOpen = useSignal(false);
const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value;
console.log(isSidebarOpen.value);
};

return (
<div class={`relative ${isSidebarOpen ? 'w-64' : 'w-16'} transition-all ease-in-out duration-300 overflow-hidden z-10 h-screen`}>
<button onClick={toggleSidebar} class={`absolute top-1/2 text-black rounded-full focus:outline-none z-20`}>
{isSidebarOpen ? '←' : '→'}
</button>

<div class={`absolute top-0 left-0 h-full p-4 bg-gray shadow-lg rounded-r-md ${isSidebarOpen ? 'block' : 'hidden'}`}>
{loggedIn ? (
<>
<a href="/dashboard" class="block p-2 text-blue-500">Dashboard</a>
<a href="/logout" class="block p-2 text-blue-500">Logout</a>
</>
) : (
<>
<a href="/login" class="block p-2 text-blue-500">Login</a>
<a href="/register" class="block p-2 text-blue-500">Register</a>
</>
)}
</div>
</div>
);
}
I literally found the solution while writing this post, I need to use isSidebarOpen.value instead of isSidebarOpen in the conditional html! However I decided to post it anyway if someone finds them in the same situation as me!:)
Mmarvinh.10/11/2023
Yeah useSignal returns a signal not the value itself

Looking for more? Join the community!