when i have a ```State<List<MyData>>``...

# compose-desktop

[Nikky]

when i have a

State<List<MyData>>

how would i use a layout compontn like Rowm Column or smth else to render each element in the list ?

essentially, can i do a renderEach ?

[Zach Klippenstein (he/him) [MOD]]

Unless you know the list will always be very small, the safest bet is to use LazyColumn or LazyRow

[Zach Klippenstein (he/him) [MOD]]

But technically yes, you could just iterate over it with a foreach and call other composables. That’s not as performant as using the lazy list composables though.

[theapache64]

Try LazyColumn as @Zach Klippenstein (he/him) [MOD] mentioned

LazyColumn {
    items(myList.value) { item ->
        Text("Item : $item")
    }
}

[Nikky]

so this will re-render the items if myList.value changes ? nice

[Zach Klippenstein (he/him) [MOD]]

if List is either immutable and you push a new value into the State, or if your list is a mutableStateListOf, then yes

[Zach Klippenstein (he/him) [MOD]]

If your list is simply a mutableListOf, and you mutate the list, it won’t trigger recompositions

[Nikky]

okay so either list in state or mutableStateListOf, makes sense

[theapache64]

fun main() {

    val myList = mutableStateListOf(
        MyData("A"),
        MyData("B"),
        MyData("C"),
    )

    Window {

        Column {
            LazyColumn {
                items(myList.size) { itemIndex ->
                    val item = myList[itemIndex]
                    Text("Item : ${item.name}")
                }
            }

            Button(
                onClick = {
                    myList.add(MyData("NEW: ${Date()}"))
                }
            ) {
                Text(text = "Add New Item")
            }
        }

    }
}

[Nikky]

i tried this.. but it seems to crash as soon as the list reduces in size
it seems to re-render and cannot find the index anymore

PS i guess i need myList.getOrNull(ItemIndex) ?: return@items

[Adam Powell]

known issue fixed by https://android-review.googlesource.com/c/platform/frameworks/support/+/1640311 - this should be in beta03 next week

[Nikky]

heh, nice

[Nikky]

well this about scrolling.. in my case i have a TextField and a remembered TextFieldValue on each element and when i remove any element.. only the last element in the rendered lsit gets removed.. (although console tells me the data is correct)

i do the remembered TextFieldValue this way:

val textState = remember(index) { mutableStateOf(TextFieldValue(item.foo)) }

i hope this makes sense.. i am new to this and jsut want to see what i can do

[Nikky]

i found a way to make it work i guess, use State<MyData> as elements in the list
and do not use remember {} at all