MaDsEn
Error upgrading headlessui
When you use the * inside the imported package it will retrieve packages that is also used in this case floating ui react, so try Importing that also with wrapping it with the alias, but without the *, but I know a lot of people have trouble with headless ui after the new version came out https://discord.com/channels/684898665143206084/991511118524715139/1240955650352349205, so some go back to a previous version for now
3 replies
Problem rerender a island when updating the value of a signal!
You could check out https://github.com/lucacasonato/fresh-with-signals to see how signals could be setup and just build on it.
8 replies
Problem rerender a island when updating the value of a signal!
Should be possible. Try something like this - //this is the islands/SearchFilter.tsx
import { useSignal } from "@preact/signals";
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useSignal(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory() === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory()}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...8 replies
Problem rerender a island when updating the value of a signal!
Have you tried implementing useState - //this is the islands/SearchFilter.tsx
import { useState } from 'preact/hooks';
import { categorySignal, handleSearch } from '../signals/search.ts';
interface SearchFilterProps {
initialCategory: string;
}
export default function SearchFilter(props: SearchFilterProps) {
const [currentCategory, setCurrentCategory] = useState(props.initialCategory);
const updateCategory = (newCategory:string) => {
console.log(
Updating category to: ${newCategory});
setCurrentCategory(newCategory);
// Optionally, update the browser's URL to reflect the new category without reloading the page
const url = new URL(window.location.toString());
url.searchParams.set('category', newCategory);
// Push the new URL with the updated category
window.history.pushState({}, '', url.toString());
search()
};
// Helper function to determine button classes based on current category
const buttonClass = (category: string) =>
text-xl py-1 text-white ${currentCategory === category ? "font-bold" : "font-medium"};
return (
<div class="bg-[#242B2D] max-w-fit mx-auto ">
<div>Current Category: {currentCategory}</div>
<div class ="max-w-screen-xl flex flex-row items-center justify-start mx-auto p-4">
<div class="flex flex-row items-center justify-start">
<ul class="flex gap-12">
<li>
<button onClick={() => updateCategory('organizations')} class={buttonClass('organizations')}>
Organizations
</button>
</li>
...8 replies
How to send data from a child component to its sibling?
In your Form2 component, the line <p>The value is {form1Data} + {form2Data}</p> is not joining the two values properly. Try using curly braces and the + sign outside the string to link the values. See if this works <p>The value is {form1Data + ' ' + form2Data}</p>
7 replies