I’m trying to create multiple instances of the same TextField by iterating through them in a list rather than directly creating each instance. The problem is that none of the keystrokes are appearing in the TextField.

To start off I put the value and onValueChange parameters into a data class called “TextFieldClass.

data class TextFieldClass(
    var textValue: String,
    var onTextChange: (String) -> Unit,
    val label : String
)

I then made a list containing two instances of the “TextFieldClass” called “textFieldClasses”

val textFieldClasses = listOf(
    TextFieldClass(
        textValue = "",
        onTextChange = { newValue ->},
        label = "Text Field 1"
    ),
    TextFieldClass(
        textValue = "",
        onTextChange = { newValue ->},
        label = "Text Field 2"
    )

)

I then created a composable that contains the TextField UI called “TextFieldListItem” The value, onValueChange, and label parameters are passing into the constructor.

Composable
fun TextFieldListItem(
    text: String,
    onTextChange: (String) -> Unit,
    label: String
) {
    TextField(
        value = text,
        onValueChange = { onTextChange(it) },
        label = { Text(label) }
    )

}

I then created another composable to contain the “TextFieldListItem” and iterate through the “textFieldClasses” list called “TextFieldList” I’m sorry if using list too much is confusing.

@Composable
fun TextFieldList() {
    Column {
        textFieldClasses.forEach{ textFieldTests ->
            TextFieldListItem(
                text = textFieldTests.textValue,
                onTextChange = {textFieldTests.onTextChange(it)},
                label = textFieldTests.label
                )
        }
    }
}

And finally I put it all in the Main Activity.

However the problem still persists. The keystrokes are not appearing on the TextField. It just stays empty.

Does anyone know how to fix this?