For Loop by Button onClick in Jetpack Compose?

Question

How can we write a code that for example if user click a button, then 20 text or 20 of our function be created inside our Column below the Button?

Because we can't write the for loop inside the button click, because we get the: @Composable invocations can only happen from the context of a @Composable function Error

Do you wish to create 20 Composables below `Button` when you click it once? — Thracian, Sep 25 '22 at 18:36
yeah. a Text for example. in fact, I want to make a Text for each record that I have in my SQLite — Reza Zeraati, Sep 25 '22 at 18:42

score 2 · Accepted Answer · answered Sep 25 '22 at 18:57

If you add to mutableStateListOf, delete from it or update an item with new instance recomposition will be triggered and inside a for loop you can create Text for each data contained in SnapshotStateList.

@Composable
private fun AddComposablesInLoopSample() {
    val myList: SnapshotStateList<String> = remember {
        mutableStateListOf()
    }

    Column {
        Button(onClick = {
            myList.addAll(getData())
        }) {
            Text("Get Data")
        }

        myList.forEach {
            Text(it)
        }
    }
}

private fun getData(): List<String> {
    val myList = mutableListOf<String>()
    repeat(20) {
        myList.add("Row $it")
    }

    return myList.toList()
}

getData function is for demonstration to fill list.

Result

For Loop by Button onClick in Jetpack Compose?

1 Answers1