Pull data from dynamic instances of views

Question

I'm putting together a data entry form for vendors of an app. To save on time and make coding efficient, I put many of the more standard layouts in their own structures, of which I called instances. The issue is I want to be able to take what people write down in the textfield parts of the instances and:

Pass them into a screen that previews what their info would look like to customers
pull them up to a database.

The issue is I have no idea how to refer to the variables, because I believe since they're all copies of the same structure the text fields have the same variable names.

Here's an example for reference:

Here is a structure I created incorporating a text field, title, and optional subtitle, called DataFieldView()

struct DataFieldView: View {
    var title: String = ""
    var subtitle: String?
    var textEnterText: String = ""
    var dataVar: String = ""
    @State var changedText: Bool = false
    @State var enteredText: String = ""
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .font(.title2)
                .italic()
                .padding(.leading, 10)
            TextField(textEnterText, text: $enteredText)
                .padding()
                .frame(width: 350)
                .background(Color(red: 0.8, green: 0.8, blue: 0.8))
                .cornerRadius(10)
                .foregroundColor(.black)
                .font(.headline)
            if subtitle != nil {
                Text(subtitle!)
                    .font(.body)
                    .foregroundColor(Color(red: 0.3, green: 0.3, blue: 0.3))
                    .padding(.leading,10)
            }
            
        }
    }
}

Here is part of the entry form, which incorporates many instances of DataFieldView().

struct EntryView: View {
    @State var textFieldText: String = ""
    @State var genContShow: Bool = true

    var body: some View {
        ScrollView {                
            //MARK: General and Contacts
            VStack(alignment:.leading, spacing: 20) {
                Text("General and Contacts")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                    .padding(.bottom, 15)
                if genContShow == true {

                    DataFieldView(title: "Name")
                    DataFieldView(title: "Email Address")
                    DataFieldView(title: "Address Line 1")
                    DataFieldView(title: "Address Line 2")
                    DataFieldView(title: "City")
                    DataFieldView(title: "State")
                    DataFieldView(title: "ZIP Code")
                        .padding(.bottom, 50)
                }
            }
        }
    }
}

I want to take what people type in the text fields for each instance of DataFieldView() and assign that to their own variables. But for the life of me I can't figure out how to refer to them.

I tried passing these instances into their own variables, but that did not seem to work. It only captured the contents of the text fields when they first loaded onto the screen, and obviously since they're text fields I want to capture what's in them after people update them.

score 0 · Answer 1 · answered Jun 21 '23 at 19:02

To get entered data from DataFieldView you need to create two-way connection using Binding. You can change your enteredText variable to Binding type (@Binding var enteredText: String). Then you need to create @State variables in your View EntryView to store the entered values. For example:

@State var name: String = ""
@State var email: String = ""
@State var address1: String = ""

// ... etc

And pass those values to DataFieldView's property:

DataFieldView(title: "Name", enteredText: $name)
DataFieldView(title: "Email Address", enteredText: $email)
DataFieldView(title: "Address Line 1", enteredText: $address1)

You can check that properties update values by adding Text view below each DataFieldView, for example:

DataFieldView(title: "Name", enteredText: $name)
Text("\(name)")
DataFieldView(title: "Email Address", enteredText: $email)
Text("\(email)")
DataFieldView(title: "Address Line 1", enteredText: $address1)
Text("\(address1)")

Pull data from dynamic instances of views

1 Answers1