TextField's onValueChange doesn't modify view model state

Question

TextField always get empty when I try to write in it.

My ViewModel:

class MyVM: ViewModel() {
    var name by mutableStateOf("")

    fun onNameChange(newString: String) {
        name = newString
    }
}

In MainActivity:

val myVM = MyVM()

MyScreen(
    modifier = Modifier.fillMaxSize(),
    name = myVM.name
) {
    myVM.onNameChange(it)
}

MyScreen:

@Composable
fun MyScreen(
    modifier: Modifier,
    name: String,
    onNameChange: (String) -> Unit,
) {
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center,
    ) {
        OutlinedTextField(
            value = name,
            onValueChange = { newText -> onNameChange(newText) },
            label = { Text(text = "Name") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
        )
    }
}

I want user to enter their name and in viewmodel update the name mutable state variable

tyg · Accepted Answer · 2025-02-09 12:35:17Z

3

Using val myVM = MyVM() in Compose will create a new view model instance on each recomposition, starting with a new name property that is empty.

You want the view model instance to survive recompositions. For that you need to use the factory function viewModel() like this:

val myVM = viewModel<MyVM>()

or

val myVM: MyVM = viewModel()

Take your pick.

edited Feb 9 at 12:35

answered Feb 7 at 10:25

tyg

20.7k5 gold badges46 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TextField's onValueChange doesn't modify view model state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related