Question 276367 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Not able to change jetpack compose variable within another function

I’m trying to change a variable on button click within another function. But i’m getting a syntax error under "currentPage" at this line:

"A" -> RegistrationScreen(currentPage)

The error says:

Type mismatch: inferred type is String but MutableState was expected

Here’s the code:

@Composable
fun CrossSlideExample() {

    var currentPage by remember { mutableStateOf("A") }

        CrossSlide(targetState = currentPage) { screen ->
            when (screen) {
                "A" -> RegistrationScreen(currentPage)
                "B" -> LoginScreen()
            }
        }

}

@Composable
fun RegistrationScreen(currentPage:MutableState<String>){
    Button(onClick = {
        currentPage.value = "B"
    }) {
        Text(text = "GO TO LOGIN")
    }
}

@Composable
fun LoginScreen(){
    Button(onClick = { /*TODO*/ }) {
        Text(text = "GO BACK TO REGISTRATION")
    }
}
Tags:

2

Answers


  1. 0

    When you use the by property delegate, the type of currentPage is not MutableState<String> but just String. The fact that it’s backed by MutableState is hidden. You have two options:

    1. Remove by keyword and use currentPage as MutableState:
    val currentPage = remember { mutableStateOf("A") }
CrossSlide(targetState = currentPage.value) { screen ->
    when (screen) {
        "A" -> RegistrationScreen(currentPage)
        "B" -> LoginScreen()
    }
}
    1. Keep by delegate and add callback to RegistrationScreen – this is preferred since having State as a function parameter is not recommended.
    @Composable
fun CrossSlideExample() {
    var currentPage by remember { mutableStateOf("A") }

    CrossSlide(targetState = currentPage) { screen ->
        when (screen) {
            "A" -> {
                RegistrationScreen(
                    currentPage = currentPage,
                    onCurrentPageChange = { currentPage = it },
                )
            }
            "B" -> LoginScreen()
        }
    }
}

@Composable
fun RegistrationScreen(
    currentPage: String, // you don't use the value itself here, so not needed
    onCurrentPageChange: (String) -> Unit,
){
    Button(onClick = {
        onCurrentPageChange("B")
    }) {
        Text(text = "GO TO LOGIN")
    }
}
    Login or Signup to reply.
  2. 0

    The problem is in the var currentPage by remember { mutableStateOf("A") } statement.

    Here you are using by delegate, which is extracting the value and making the currentPage as String instead of MutableState<String>.

    By updating your code to

        val currentPage = remember { mutableStateOf("A") }

        CrossSlide(targetState = currentPage.value) { screen ->
            when (screen) {
                "A" -> RegistrationScreen(currentPage)
                "B" -> LoginScreen()
            }
        }

    This way by avoiding the by delegate, you can capture the MutableState object directly.

    Ref: https://kotlinlang.org/docs/delegated-properties.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search