I'm trying to build tabs component. So it takes

Flow<List<MenuData>>

(

MenuData

contains the title and link for

Router

) as a parameter. So I use

Flow<List<>>.renderEach()

to render the items. So far so good, it works. But now, I want to highlight (just change CSS, not DOM) the currenty selected item from

Router

. And I can'd find a way to do it. I tried

combine

my flow with

Router.data

, but then i can't use

Flow<List<>>.renderEach()

. Is there some elegant solution to it?

Can you explain, why exactly the

combine

prohibits the usage of some

renderAech

? In general without deeper knowledge about your code there has to be some merging of different flows, if the tabs must absolutely be reactive (To be honest I have my doubts that is is really needed!) Can you probably show us some sketch of the approach to get more details? Or explain more detailed why you cannot use the render method?

@Pitel If I get you right, you wan't to dynamically change the styling of your current tab. Maybe this code snippet helps:

fun MenuComponent.menuAnchor(linkText: String) {
    val selected = style {
        color { gray100 }
        background {
            color { primary.main }
        }
    }

    val isActive = router.data.map { hash -> hash == linkText }
        .distinctUntilChanged()

    link {
        text(linkText)
        href("#$linkText")
        element {
            className(selected.whenever(isActive).name)
        }
    }
}