Hey, what is the idiomatic way to add and remove a...

# compose-web

[Ayfri]

Hey, what is the idiomatic way to add and remove a class to an element using a mutableState<Boolean> ? For now I have this but it's very ugly I guess 👀

data class Tab(val name: String, val link: String, val selected: MutableState<Boolean> = mutableStateOf(false)) 

@Composable
fun Tab(tab: Tab) {
	NavLink(tab.link, {
		if (tab.selected.value) {
			ref { htmlAnchorElement ->
				htmlAnchorElement.classList.add("selected")
				onDispose {}
			}
		} else {
			ref { htmlAnchorElement ->
				htmlAnchorElement.classList.remove("selected")
				onDispose {}
			}
		}
	}) {
		Text(tab.name)
	}
}

[Big Chungus]

classes is cumulative and reproducaeble. So a good old if statement whith classes() invocation is sufficient

attrs = {
classes("other-class")
if(selected) classes("selected")
}

[Ayfri]

aah it works like that, I see, thanks !

[Big Chungus]

Yep, quite elegant

[hfhbd]

BTW are you using NavLink from routing compose? How do you set selected? routing compose already parses the current path and sets the active class. But I guess, it should be better to provide a Boolean in the attrs block to set the classes by yourself

[hfhbd]

Eg:

NavLink(tab.link, { selected ->
  if (selected) {
    classes("selected")
  }
}) {
  Text(tab.name)
}

[Ayfri]

Yeah I've seen later that there was already an active class set by routing-compose, so I used it in the end

[hfhbd]

Yeah, but I removed the default hardcoded class and added the Boolean parameter, because a library should support customizing 🙂 Published in 0.2.6

[Ayfri]

Oh it's you, so I'll change my code like your example 🙂