android studio bumblebee Jetpack compose textfield error - kotlin

Question

i wrote an outlinedTextField and the "it" in onValueChange does not work along the label text
it does not read and Text also displays an error.
val usernameState = rememberSaveable{ mutableStateOf(TextFieldValue) }
OutlinedTextField(
value = usernameState.value,
onValueChange = { usernameState.value = it },
label = { Text(text = "username")}
)
this is error for calling the outlinedTextfield and setting it up:
None of the following functions can be called with the arguments supplied:
public fun OutlinedTextField(value: TextFieldValue, onValueChange: (TextFieldValue) -> Unit, modifier: Modifier = ..., enabled: Boolean = ..., readOnly: Boolean = ..., textStyle: TextStyle = ..., label: (() -> Unit)? = ..., placeholder: (() -> Unit)? = ..., leadingIcon: (() -> Unit)? = ..., trailingIcon: (() -> Unit)? = ..., isError: Boolean = ..., visualTransformation: VisualTransformation = ..., keyboardOptions: KeyboardOptions = ..., keyboardActions: KeyboardActions = ..., singleLine: Boolean = ..., maxLines: Int = ..., interactionSource: MutableInteractionSource = ..., shape: Shape = ..., colors: TextFieldColors = ...): Unit defined in androidx.compose.material
public fun OutlinedTextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = ..., enabled: Boolean = ..., readOnly: Boolean = ..., textStyle: TextStyle = ..., label: (() -> Unit)? = ..., placeholder: (() -> Unit)? = ..., leadingIcon: (() -> Unit)? = ..., trailingIcon: (() -> Unit)? = ..., isError: Boolean = ..., visualTransformation: VisualTransformation = ..., keyboardOptions: KeyboardOptions = ..., keyboardActions: KeyboardActions = ..., singleLine: Boolean = ..., maxLines: Int = ..., interactionSource: MutableInteractionSource = ..., shape: Shape = ..., colors: TextFieldColors = ...): Unit defined in androidx.compose.material

Answer 1

You need to provide a String as a value with the signature that you are using there. Hence, the value parameter that you are passing should be unserNameState.value.value. The first value is to extract state value from MutableState, and the second is to extract the String from TextFieldValue. Also, you need to initialize the constructor of the TextFieldValue there by adding parenthesis to it.
My recommendation would be you go for the simplest approach.
var uns by remeberSaveable{ mutableStateOf("") } // Use 'by' to treat this state as a regular variable
OutlinedTextField(
value = uns, // As simple as that
onValueChange = { uns = it },
label = { Text("User Name") }
)
Consider taking the codelabs to gain a better overall understanding of Compose.
What have you sculpted on the Moon so far?

Answer 2

You can do it using remember as
val usernameState = remember { mutableStateOf(TextFieldValue) }
OutlinedTextField(
value = usernameState.value,
onValueChange = { usernameState.value = it },
label = { Text(text = "username")}
)
or you can use Kotlin delegation as
val username by remember { mutableStateOf(TextFieldValue) }
OutlinedTextField(
value = username,
onValueChange = {username = it},
label = {Text(text = "username")}
)
MutableState doesn't have getters and setters by default. To use Kotlin delegation, you have to import the necessary getters and setters (suggested by IDE) which are extension function for MutableState