S
SolidJS15mo ago
zh0nb

onClick event does not get fired

Hi everyone, I'm facing a weird issue where onClick events are not fired if I use them within a For loop. The button that's outside of the for loop (.working-button) is working fine, but the rest are not working at all. This is the component's code (I'm using nanostores since I'm embedding this within an Astro website with client:load). You can see my code here:
// TagFilter.tsx contents
import { useStore } from '@nanostores/solid';
import { filterTags, tags } from '../recipeStore';

import { For } from "solid-js";

export default function TagFilters() {
const $tags = useStore(tags);
const $ActiveFilter = useStore(filterTags);

const highlightedTags = $tags().filter((tag) => {return tag.highligthed});

const setTagFilter = (tagname: string, event: Event) => {
console.log('clicked');
console.log(tagname);
}

return (
<>
<div class="fixed bottom-0 w-full last:pb-4">
<div class="filter tags justify-center flex gap-2">
<button class="working-button bg-amber-300" onClick={[setTagFilter, 'test']}>Clickme</button>
<For each={highlightedTags}>
{(tag) =>
<>
<button
onClick={([setTagFilter, 'buttonclick'])}
class="tagbutton bg-amber-300 text-md hover:ring-amber-500 hover:ring-2 hover:cursor-pointer hover:bg-amber-500 active:bg-amber-500 px-3 py-2 rounded-full"
>{tag.name}</button>
</>
}
</For>
</div>
</div>
</>
)
}
// TagFilter.tsx contents
import { useStore } from '@nanostores/solid';
import { filterTags, tags } from '../recipeStore';

import { For } from "solid-js";

export default function TagFilters() {
const $tags = useStore(tags);
const $ActiveFilter = useStore(filterTags);

const highlightedTags = $tags().filter((tag) => {return tag.highligthed});

const setTagFilter = (tagname: string, event: Event) => {
console.log('clicked');
console.log(tagname);
}

return (
<>
<div class="fixed bottom-0 w-full last:pb-4">
<div class="filter tags justify-center flex gap-2">
<button class="working-button bg-amber-300" onClick={[setTagFilter, 'test']}>Clickme</button>
<For each={highlightedTags}>
{(tag) =>
<>
<button
onClick={([setTagFilter, 'buttonclick'])}
class="tagbutton bg-amber-300 text-md hover:ring-amber-500 hover:ring-2 hover:cursor-pointer hover:bg-amber-500 active:bg-amber-500 px-3 py-2 rounded-full"
>{tag.name}</button>
</>
}
</For>
</div>
</div>
</>
)
}
I hope someone can help me to find out. Thanks in advance!
2 Replies
Alex Lohr
Alex Lohr15mo ago
The extra brackets around the array might confuse DOM expressions, but I'm not sure.
zh0nb
zh0nb15mo ago
I think it is something with the integration in Astro.. I tried the same code in the solid playground and it works 😦 I thought it could have been me, just being a noob in solid, but I still need to figure out if it is on the Astro's end, thanks for your reply 🙂 The issue was with Astro and SSR, where the data didn't get nicely to the client (astro does some pre-processing for the SSR), but managed to solve it, thanks anyways Alex!