Mutable state of value from viewModel is not working

Question

I have a mutablestate in my ViewModel that I'm trying to set and access in my composable. When I use delegated Property of remember it is working but after creating it in viewModel and accessing it in compose the state of the variable is empty how to use the state with viewModel

Everything is working fine when the state is inside the compose

var mSelectedText by remember { mutableStateOf("") }

But when i use it from viewModel change and set my OutlinedTextField value = mainCatTitle and onValueChange = {mainCatTitle = it} the selected title is not Showing up in the OutlinedTextField is empty

 private val _mainCatTitle = mutableStateOf("")
 val mainCatTitle: State<String> = _mainCatTitle

my Composable

   var mSelectedText by remember { mutableStateOf("") }
   var mainCatTitle = viewModel.mainCatTitle.value

   Column(Modifier.padding(20.dp)) {

    OutlinedTextField(
        value = mainCatTitle,
        onValueChange = { mainCatTitle = it },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                mTextFieldSize = coordinates.size.toSize()
            },
        readOnly = true,
        label = { Text(text = "Select MainCategory") },
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { mExpanded = !mExpanded })
        }
    )

    DropdownMenu(expanded = mExpanded,
        onDismissRequest = { mExpanded = false },
        modifier = Modifier.width(with(
            LocalDensity.current) {
            mTextFieldSize.width.toDp()
        })) {
        selectCategory.forEach {
            DropdownMenuItem(onClick = {
                mainCatTitle = it.category_name.toString()
                mSelectedCategoryId = it.category_id.toString()
                mExpanded = false
                Log.i(TAG,"Before the CategoryName: $mainCatTitle " )
            }) {

                Text(text = it.category_name.toString())
            }
        }
    }
}

Log.i(TAG,"Getting the CategoryName: $mainCatTitle " )
}

in my First log inside the DropDownMenuItem the log is showing the Selected field but second log is empty

Have attached the image

How do you update it in your ViewModel? – z.g.y Nov 10 '22 at 11:47 — z.g.y, Nov 10 '22 at 11:47

z.g.y · Accepted Answer · 2022-11-10T12:29:41.683

Your'e directly modifying the mainCatTitle variable from onClick, not the state hoisted by your ViewMoel

  DropdownMenuItem(onClick = {
        mainCatTitle = it.category_name.toString()
        ...

and because you didn't provide anything about your ViewModel, I would assume and suggest to create a function if you don't have one in your ViewModel that you can call like this,

DropdownMenuItem(onClick = {
       viewModel.onSelectedItem(it) // <-- this function
       ...
}

and in your ViewModel you update the state like this

fun onSelectedItem(item: String) { // <-- this is the function
    _mainCatTitle.value = item
}

Mutable state of value from viewModel is not working

1 Answers1