One thing I get tripped up a lot on in compose is ...

# getting-started

[Colton Idle]

One thing I get tripped up a lot on in compose is onClick lambdas that require something to be passed in.

The most common example

@Composable
fun Something(itemClick: (Int) -> Unit){}

I need to send an Int back up with the item click so I know which item was clicked.

So generally, if I find myself passing in a lambda that has a parameter, would that typically mean I need two args defined so I can do this

@Composable
fun Something(itemId: Int, itemClick: (Int) -> Unit){
itemClick(itemId)
}

or should I just be able to do {itemClick} or something?

[Colton Idle]

i get doubly confused when I need like

(itemClick: (Int, String) -> Unit)

and then I'm like "wait do I need two additional args?"

[ephemient]

why do you need that? the caller can capture the value at the time it creates the lambda,

for (item in items) {
    Something(item) {
        doSomething(item)

[Colton Idle]

why do you need that?

well I guess that answers my question

I think ive been doing this all wrong. lol 🤦

[Hackintoshfive]

I think ive been doing this all wrong. lol 🤦

It's a valid thing to do, but only in specific circumstances. Having the correct parameters passed directly will save you from having to instantiate more lambda objects, and might have a slight impact on performance. But usually it's not worth the effort, and most people wouldn't use it.

[Colton Idle]

So I ran into this again today where I caught myself passing stuff i needed in the click handler, into the composable itself. hm. something is not clicking.

like. what the heck am I even doing? could use a sanitycheck

OuterCardView(
    state = myState.cardStates[index]
) {
    onCardClicked(
        (myState.cardStates[index] as ConcreteState).uuid,
        (myState.cardStates[index] as ConcreteState).isOptedIn == true
    )
}

and OuterCardView is defined as such

@Composable
fun OuterCardView(state: MyState, onClicked: (String) -> Unit) {
    Card() {
        when (state) {
            is ConcreteState -> InnerItemView(state, onClicked)
            //is whatever...
        }
    }
}

and

@Composable
private fun InnerItemView(state: MyState, onClicked: (String) -> Unit) {
    Row(
        Modifier
            .clickable {
                onClicked(state.uuid)
            }
//...
}

like. how does this work/compile. maybe i need sleep

[CLOVIS]

What part of it do you not expect to compile?

[Colton Idle]

I guess I'm not sure why I have the inner clicks at all. Wouldn't I just want to have something like:

OuterCardView(
    state = myState.cardStates[index]
) {
    onCardClicked(
        (myState.cardStates[index] as ConcreteState).uuid,
        (myState.cardStates[index] as ConcreteState).isOptedIn == true
    )
}

and OuterCardView is defined as such

@Composable
fun OuterCardView(state: MyState, onClicked: () -> Unit) {
    Card() {
        when (state) {
            is ConcreteState -> InnerItemView(state, onClicked)
            //is whatever...
        }
    }
}

and

@Composable
private fun InnerItemView(state: MyState, onClicked: () -> Unit) {
    Row(
        Modifier
            .clickable(onClicked)
//...
}