How to handle mutliple textfield in compose?

Question

I tried to make multiple textfield with jetpack compose. What I couldn't do was that I can't handle the input data of the textfield. I tried to save input data with val temp by remember { mutableStateOf(tempList) }, but it doesn't work. The text in the textfield wasn't changing after I typed.

Main part is AddPerson() function.

@Composable
fun AddPerson() {
    val personInputList = getPersonInputList()
    Column(
        modifier = Modifier.verticalScroll(rememberScrollState())
    ) {
        Image(
            painter = painterResource(id = R.drawable.blank_profile_pictrue),
            contentDescription = "Person Image",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(128.dp)
                .padding(16.dp)
                .clip(RoundedCornerShape(percent = 10))
        )

        var tempList = mutableListOf<String>()
        tempList.add("name")
        tempList.add("age")
        tempList.add("company")
        tempList.add("hobby")
        tempList.add("personality")
        tempList.add("marriage")
        tempList.add("children")
        tempList.add("like")
        tempList.add("dont_like")
        tempList.add("etc")

        val temp by remember { mutableStateOf(tempList) }

        personInputList.values.forEachIndexed { index, data ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(0.dp, 8.dp)
            ) {
                //var inputName by remember { mutableStateOf("") }
                Text(
                    text = stringResource(id = data.stringId),
                    modifier = Modifier
                        .width(96.dp)
                        .padding(12.dp, 0.dp),
                )
                TextField(
                    value = temp[index],
                    label = {
                        Text(data.label)
                    },
                    onValueChange = { temp[index] = it },
                    singleLine = true,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp, 0.dp)
                )
            }
        }

        // Button
        Button(
            onClick = {
                // TODO
            },
            colors = ButtonDefaults.textButtonColors(
                backgroundColor = Color.LightGray
            ),
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            elevation = ButtonDefaults.elevation(
                defaultElevation = 6.dp,
                pressedElevation = 8.dp,
                disabledElevation = 0.dp
            )
        ) {
            Text(
                "Complete",
                color = Color.Black,
            )
        }
    }
}

private fun getPersonInputList(): LinkedHashMap<String, InputPersonData> {
    val personInputList = LinkedHashMap<String, InputPersonData>()
    personInputList["name"] = InputPersonData(R.string.name, "Enter his/her name")
    personInputList["age"] = InputPersonData(R.string.age, "Enter his/her age")
    personInputList["company"] = InputPersonData(R.string.company, "Enter his/her name")
    personInputList["hobby"] = InputPersonData(R.string.hobby, "Enter his/her name")
    personInputList["personality"] = InputPersonData(R.string.personality, "Enter his/her name")
    personInputList["marriage"] = InputPersonData(R.string.marriage, "Enter his/her name")
    personInputList["children"] = InputPersonData(R.string.children, "Enter the name")
    personInputList["like"] = InputPersonData(R.string.like, "Enter the name")
    personInputList["dont_like"] = InputPersonData(R.string.dont_like, "Enter the name")
    personInputList["etc"] = InputPersonData(R.string.etc, "Enter the name")
    return personInputList
}

I tried multiple ways to solve this problem, but I couldn't solve it.
How can I handle multiple inputs of textfield in jetpack compose?

Answer 1

Instead of remember mutableStateOf(mutableListOf<String>()) you can use mutableStateListOf

In compose you can't perform any calculations, like you're adding items to the list, just inside composable function. You need to use one of side-effects or perform initial calculations(if these are not heavy) inside rememer:

val temp = remember {
    mutableStateListOf(
        "name",
        "age",
        "company",
        "hobby",
        "personality",
        "marriage",
        "children",
        "like",
        "dont_like",
        "etc",
    )
}