Variable doesn't update inside composable using jetpack compose

Question

I'm trying out jetpack compose and have a basic textfield composable that accepts a boolean variable for validation. However it doesn't update properly and only works at initialisation.

class RegistrationActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {

        var name = "zzz"

        BasicField(
            title = "Last Name",
            value = name,
            onValueChange = {name = it},
            placeholder = "Enter Last Name",
            validation = (name.length>2&&name.contains("zzz"))
        )
    }
}}

composable:

@Composable
fun BasicField(title: String,
           value: String,
           onValueChange: (String) -> Unit,
           placeholder: String,
            maxLines: Int = 1,
            validation: Boolean ) {

var fieldValue by remember { mutableStateOf(TextFieldValue(value)) }

BasicTextField(
    maxLines = maxLines,
    value = fieldValue,
    onValueChange = {
        fieldValue = it

        if(fieldValue.text.length>5){//this part works
            Log.e("error","valid string")
        }else{
            Log.e("error","invalid string")
        }

        if(validation){//this part doesnt work
            Log.e("error","custom validation works")
        }else{
            Log.e("error","custom validation failed")
        }


    },


) }

I have a basic validation inside the composable which checks for string length which works, but when the logic is from outside it doesn't work. I appreciate any help or hint thanks!

Answer 1

You need to make your name as state in compose. Here we have used 2 things.

1. name is defined as state. And it is remembered in composition. So whenever this composable function goes into re-composition, this name will not be re-assigned.

2. Used LaunchedEffect to execute your logs statements. So LaunchedEffect will start with a key and when they key changes, this effect will restart.

---

class RegistrationActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {

                // 1
        val name = remember { mutableStateOf("") }

        BasicField(
            title = "Last Name",
            value = name.value,
            onValueChange = {name.value = it},
            placeholder = "Enter Last Name",
            validation = (name.value.length>2&&name.value.contains("zzz"))
        )
    }
}}

---

@Composable
fun BasicField(title: String,
           value: String,
           onValueChange: (String) -> Unit,
           placeholder: String,
            maxLines: Int = 1,
            validation: Boolean ) {

    // 2
    LaunchedEffect(key = value) {
        if(value.length>5){
            Log.e("error","valid string")
        }else{
            Log.e("error","invalid string")
        }
        
        if(validation){
            Log.e("error","custom validation works")
        }else{
            Log.e("error","custom validation failed")
        }
    }
    
    BasicTextField(
        maxLines = maxLines,
        value = value,
        onValueChange = {
            onValueChange(it)
            },
    ) 
}