Amplify SwiftUI Authenticator UI, how to bind input field array to TextField

Question

I am writing CustomSignUpView with Authenticator UI component in SwiftUI.

Can anyone give me an example of how to bind the PhoneNumber or Email fields to my TextField?

I tried the following but doesn't work

struct LoginScreen: View {
    var body: some View {
        Authenticator(
            signUpContent: { state in
                CustomSignUpView(state: state)
            }
        ) { _ in }
    }
}

struct CustomSignUpView: View {
   @ObservedObject var state: SignUpState
   var body: some View {
      TextField("number", text: $state.fields[0].value)
   }
}

Answer 1

I got the clean solution from Amplify team,

struct CustomSignUpView: View {
    @ObservedObject var state: SignUpState
    
    var body: some View {
        VStack {
            ForEach(state.fields, id: \.self) { field in
                CustomField(field)
            }

            Button("Sign Up") {
                Task {
                    try? await state.signUp()
                }
            }
        }
    }
}

struct CustomField: View {
    @ObservedObject private var signUpField: SignUpState.Field
    
    init(_ signUpField: SignUpState.Field) {
        self.signUpField = signUpField
    }
    
    var body: some View {
        /// Display the field accordingly, for example:
        switch signUpField.field.attributeType {
        case .username:
            TextField("Username", text: $signUpField.value)
        case .password:
            SecureField("Password", text: $signUpField.value)
        case .passwordConfirmation:
            SecureField("Confirm password", text: $signUpField.value)
        case .phoneNumber:
            TextField("Phone Number", text: $signUpField.value)
        case .email:
            TextField("Email", text: $signUpField.value)
        /// ... etc
        }
    }
}