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

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

// 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!

onClick event does not get fired

Similar Threads

Similar Threads

Similar Threads