How to create a dynamic views in jetpack compose

Question

I am trying to create a some dynamic views when the user clicks add button it starts a new set of text fields and fill the required details and add all the set to final list of array i facing a problem of how to deal with the mutable state of each text field i.e value and onValueChange the text fields are sharing same viewModel mutable state.

How to deal with the dynamic views so that only the required text field value changes instead of all similar text field changing

Ui code

@Composable
fun CombineFields(viewModel: MainContentUploadViewModel = hiltViewModel()) {


val containerTitle = viewModel.containerTitle.value
val containerAbout = viewModel.containerAbout.value



OutlinedTextField(value = containerTitle.innerStateTitle,
    onValueChange = { viewModel.onEvent(MainContentEvent.ContainerTitle(it)) },
    label = { Text(text = "Title") })

Spacer(modifier = Modifier.height(8.dp))

TextField(value = containerAbout.innerStateAbout,
    onValueChange = { viewModel.onEvent(MainContentEvent.ContainerAbout(it)) },
    modifier = Modifier.height(100.dp))

Spacer(modifier = Modifier.height(8.dp))

val options = listOf("Products", "Banners", "Categories")
var expanded by remember { mutableStateOf(false) }
var selectedOptionText by remember { mutableStateOf(options[0]) }
// We want to react on tap/press on TextField to show menu
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        expanded = !expanded
    }
) {
    TextField(
        readOnly = true,
        value = selectedOptionText,
        onValueChange = { },
        label = { Text("Label") },
        trailingIcon = {
            ExposedDropdownMenuDefaults.TrailingIcon(
                expanded = expanded
            )
        },
        colors = ExposedDropdownMenuDefaults.textFieldColors()
    )
    ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = {
            expanded = false
        }
    ) {
        options.forEach { selectionOption ->
            DropdownMenuItem(
                onClick = {
                    selectedOptionText = selectionOption
                    expanded = false
                }
            ) {
                Text(text = selectionOption)
            }
        }
    }
}

}

ViewModel

 @HiltViewModel
   class MainContentUploadViewModel @Inject constructor(private val useCases: UseCases)    : ViewModel() {

private val _containerTitle = mutableStateOf(MainContentFieldState())
    val containerTitle : State<MainContentFieldState> = _containerTitle

private val _containerAbout = mutableStateOf(MainContentFieldState())
    val containerAbout : State<MainContentFieldState> = _containerAbout

private val _containerPriority = mutableStateOf(MainContentFieldState())
val containerPriority : State<MainContentFieldState> = _containerPriority

private val _selectedContent = mutableStateOf(MainContentFieldState())
    val selectedContent : State<MainContentFieldState> = _selectedContent

private val _selectedTags = mutableStateOf(MainContentFieldState())
    val selectedTags : State<MainContentFieldState> = _selectedTags

private val _allInnerContent = mutableStateOf(MainContentFieldState())
    val allInnerContent : State<MainContentFieldState> = _allInnerContent

Data Class

data class InnerContainerItems(
val containerName:String? = null,
val containerAbout:String? = null,
val containerTags:List<String>? = null,
val containerType:String? = null,
val containerPriority:Int? = null,

)

data class MainScreenContainer(
  val ScreenContainer:List<InnerContainerItems>? = null
)

can anyone help me how to move further for the dynamic fields thanks.

Answer 1

As i can see you are using var selectedOptionText by remember { mutableStateOf(options[0]) } I found this https://stackoverflow.com/a/68887484/20839582. Check if it is useful as it mentions using mutableStateListOf and rememberSaveable.