SolidJS•2y ago

classList not working on icons svg

import { IoCloseOutline } from 'solid-icons/io'

<li class="text-dark flex items-center border-2 rounded-full w-auto">
            <IoCloseOutline classList={{hidden: props.data.empty}} class={`remove-item text-white bg-dark ml-2 rounded-full`} alt="removeItem" onClick={() => props.remove(props.data)} />
            <span class="mx-2">{props.data.name}</span>
        </li>

import { IoCloseOutline } from 'solid-icons/io'

<li class="text-dark flex items-center border-2 rounded-full w-auto">
            <IoCloseOutline classList={{hidden: props.data.empty}} class={`remove-item text-white bg-dark ml-2 rounded-full`} alt="removeItem" onClick={() => props.remove(props.data)} />
            <span class="mx-2">{props.data.name}</span>
        </li>

I had to use ${props.data.empty ? 'hidden' : ''} any reason why?

6 Replies

Unknown User•2y ago

Message Not Public

KokoNeot•2y ago

thank you both! ill try it out

foolswisdom•2y ago

This is addressed in the docs, you should not use class and classList together

foolswisdom•2y ago

See the second to last paragraph in this section https://www.solidjs.com/docs/latest/api#classlist

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

KokoNeot•2y ago

yes but

The main safe situation is when class is set to a static string (or nothing), and classList is reactive

ryansolid•2y ago

Yeah but the child (where it is being applied to the DOM) can't tell if class is dynamic or not. And more than likely spreading them so order matters Not saying that's good but that's what is happening

Gaming

Programming

classList not working on icons svg