swiftUI list selection lead to textfield-CodePudding

As I have constructed a list of country codes and I am able to tap on the list items. Here i want to show the tapped or selected country code inside my textfield which means, when I click on a country code it should show inside the textfield. I am new to swiftUI, it would be great if someone helped me to get this.

enter image description here

state variables given as:

@State private var text = ""
    
    @State private var selection: String!

My textfield code goes here:

HStack {
                        TextField("Country code", text: $text).padding(.leading)
                            .frame(width: 385, height: 50)
                            .border(.gray)
                            .padding(.leading, 25)
                            .overlay(
                                Button(action: {
                                    withAnimation {
                                        showCodes.toggle()
                                    }
                                }, label: {
                                    Image(systemName: "chevron.down")
                                        .foregroundColor(.gray)
                                        .padding(.leading, 320)
                                        .position(x: 215, y: 25)
                                })
                            )
                            
                            .position(x: 195, y: 40)
                            .padding(.top, -570)
                    }

List code goes here :

    if showCodes == true {
                        List (selection: $selection) {
                            ForEach(datas.users, id: \.dial_code) { user in
                                HStack{
                                    Text(user.name)
                                        .font(.callout)
                                        .foregroundColor(Color.black)
                                    Spacer()
                                    Text(user.dial_code)
                                        .font(.callout)
                                        .foregroundColor(Color.blue)
                                }
                            }
                        }
                        .listRowInsets(EdgeInsets())
                        .frame(maxWidth: 400, maxHeight: .infinity, alignment: .leading)
                        .padding(.top, -585)
                    }

CodePudding user response：

You can have it like:

ForEach(datas.users, id: \.dial_code) { user in
       HStack {
                Text(user.name)
                     .font(.callout)
                     .foregroundColor(Color.black)
                Spacer()
                Text(user.dial_code)
                      .font(.callout)
                      .foregroundColor(Color.blue)
             }
             .onTapGesture { text = user.dial_code }
 }

I also suggest extracting the HStack along with it's content in a separate func like:

private func getCountryCodeCell(for user: User) -> some View {
 HStack {
                    Text(user.name)
                         .font(.callout)
                         .foregroundColor(Color.black)
                    Spacer()
                    Text(user.dial_code)
                          .font(.callout)
                          .foregroundColor(Color.blue)
                 }
}