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

SolidJS•3y ago•

6 replies

Cyber Grandma

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

onClick function not rendered in the DOM ?

Similar Threads

onClick function not rendered in the DOM ?

Similar Threads

Similar Threads

Similar Threads