SolidJS•2y ago

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•2y ago

The extra brackets around the array might confuse DOM expressions, but I'm not sure.

zh0nbOP•2y 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!

Gaming

Programming

onClick event does not get fired