SolidJS•5mo ago

onClick function not rendered in the DOM ?

Hi, I'm trying to make a togglable filter list. I use the For element to loop over my list of filters and create a button for each.

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

<For each={filters()}>
  {(f) => (
    <li>
      <div
        onClick={() => console.log('click')}
        class="flex justify-between"
      >
        <p>{f.label}</p>
        {f.selected ? <FaSolidCheck size={12} /> : null}
      </div>
    </li>
  )}
</For>

The issue I have is that the 'onClick' doesn't run and doesn't appear in the HTML. Here is what I get in the inspector:

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

<li data-hk="0-0-0-0.....">
  <div class="flex justify-between">
    <p>Active</p><!--$-->
    <svg data-hk="0-0-0-0-0-0....." color="currentColor" ......>
      <path d="M......">
      </path>
    </svg><!--/-->
  </div>
</li>

I am new to solid, I'm sorry if this is ends up being a really dumb issue on my part. But currently I'm scratching my head very hard about this onClick

3 Replies

Brendonovich•5mo ago

your onClick listener won't appear in the dom, it's attached in js. a bit strange that it's not firing though

lxsmnsyc•5mo ago

what SSR setup is this? Are you using Start, Astro, or your own setup? but yes, event listeners won't appear in your initial html

Cyber Grandma•5mo ago

Okay thanks for clarifying that. I've used Qwik before, and everything there was serialized in the Dom. I was a bit lost I'm using solid start yes Hi, I'm back. I've updated the dependencies manually and now it works. @lxsmnsyc 🤖 The issue was with vinxi 0.1.1 (I think)

Gaming

Programming

onClick function not rendered in the DOM ?