State hoisting pattern in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a mutable state variable in a composable function.

Android Kotlin

var text by remember { mutableStateOf("") }
TextField(value = [1], onValueChange = { text = it })

Drag options to blanks, or click blank then click option'

Avalue

Bit

Cstate

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'it' instead of the state variable for the value parameter.

Using a variable that is not declared or initialized.

The value parameter of TextField should be the state variable text to reflect the current input.

2fill in blank

medium

Complete the code to hoist the state variable out of the child composable.

Android Kotlin

@Composable
fun Parent() {
  var text by remember { mutableStateOf("") }
  Child([1], onTextChange = { text = it })
}

@Composable
fun Child(text: String, onTextChange: (String) -> Unit) {
  TextField(value = text, onValueChange = onTextChange)
}

Drag options to blanks, or click blank then click option'

Atext

Bit

Cvalue

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'it' instead of the state variable.

Not passing the state variable at all.

The text state is passed down from the parent to the child composable to hoist the state.

3fill in blank

hard

Fix the error in the state hoisting pattern by completing the code.

Android Kotlin

@Composable
fun Parent() {
  var text by remember { mutableStateOf("") }
  Child(text = [1], onTextChange = { text = it })
}

@Composable
fun Child(text: String, onTextChange: (String) -> Unit) {
  TextField(value = text, onValueChange = onTextChange)
}

Drag options to blanks, or click blank then click option'

Avalue

Bit

Ctext

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'it' or other variables instead of the state variable.

Not passing any value to the child.

The text variable must be passed as the text argument to the child composable.

4fill in blank

hard

Fill both blanks to complete the state hoisting pattern with a callback.

Android Kotlin

@Composable
fun Parent() {
  var text by remember { mutableStateOf("") }
  Child([1], onTextChange = [2])
}

@Composable
fun Child(text: String, onTextChange: (String) -> Unit) {
  TextField(value = text, onValueChange = onTextChange)
}

Drag options to blanks, or click blank then click option'

Atext

B{ newText -> text = newText }

Cit

D{ text = it }

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the wrong variable or lambda syntax.

Using 'it' directly without a lambda.

The parent passes the current text state and a lambda to update it when the child calls onTextChange.

5fill in blank

hard

Fill all three blanks to complete the state hoisting pattern with a stateless child composable.

Android Kotlin

@Composable
fun Parent() {
  var text by remember { mutableStateOf("") }
  Child([1], onTextChange = [2])
}

@Composable
fun Child([3]: String, onTextChange: (String) -> Unit) {
  TextField(value = [3], onValueChange = onTextChange)
}

Drag options to blanks, or click blank then click option'

Atext

B{ newText -> text = newText }

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent parameter names between parent and child.

Not passing the lambda correctly.

The parent passes text and a lambda to update it. The child receives the state as input and uses it in TextField.