How can I display a text typed in Textfield on first view (page) to second view (page)?

Question

Hi forum members,

I am a beginner Swift programmer who is struggling to create my first prototype of SNS-type app. I am building an account creation page currently and I'm stacked at the stage to implement confirmation page for users to check if the information they input on the previous page is correct. I have now wrote the code below but it seems the code failed to display the user input on confirmation page. It seems the code stacked at the stage to pass information to Confirmation page.

import SwiftUI

struct AccountRegistrationView: View {

    @State private var userName = ""
    @State private var email = ""
    @State private var pass = ""
    
    var body: some View {
        NavigationStack {
            VStack() {
                Text("Welcome to XXXXXXXXX!")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.mint)
                    .padding(10.0)
                Text("Enter your user name, email address and password.")
                    .font(.body)
                    .multilineTextAlignment(.center)
                    .frame(width: 320.0, height: 50.0)
            }
            VStack {
                TextField("User name", text: $userName)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                TextField("Email address", text: $email)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                TextField("Password", text: $pass)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
            NavigationLink {
                ConfirmationView()
            } label: {
                Label("Next", systemImage: "arrowshape.forward.fill")
                    .font(.body)
            }
        }
    }
    
    struct ConfirmationView: View {
        
        let userInfo = AccountRegistrationView()
        
        var body: some View {
            Text("User name: \(userInfo.userName)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Email address: \(userInfo.email)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Password: \(userInfo.pass)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
        }
    }
    
    struct AccountRegistrationView_Previews: PreviewProvider {
        static var previews: some View {
            AccountRegistrationView()
        }
    }
}

It would be much appreciated if you can point out which part of the code is causing the error and how to fix it.

Thank you so much for your support in advance!

239

Posted by

Kenties

Reply

Add a Comment

Answer 1

The way you call your AccountRegistrationView information on your ConfirmationView it will always return a copy of the AccountRegistrationView with all the info as per their initial values i.e. userName = "" email = "" pass = ""

What you need to is place the variables to be updated in your ConfirmationView as variables, see below:

struct ConfirmationView: View {
var userName: String
var email: String
var pass: String
        
        var body: some View {
            Text("User name: \(userName)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Email address: \(email)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Password: \(pass)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
        }
    }

and your NavigationLink should be:

NavigationLink {
                ConfirmationView(userName: userName, email: email, pass: pass)
            } label: {
                Label("Next", systemImage: "arrowshape.forward.fill")
                    .font(.body)
            }

Posted by

IFA

Thank you so much!

—
Kenties

Add a Comment

Answer 2

The way you call your AccountRegistrationView information on your ConfirmationView it will always return a copy of the AccountRegistrationView with all the info as per their initial values i.e. userName = "" email = "" pass = ""

What you need to is place the variables to be updated in your ConfirmationView as variables, see below:

struct ConfirmationView: View {
var userName: String
var email: String
var pass: String
        
        var body: some View {
            Text("User name: \(userName)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Email address: \(email)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Password: \(pass)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
        }
    }

and your NavigationLink should be:

NavigationLink {
                ConfirmationView(userName: userName, email: email, pass: pass)
            } label: {
                Label("Next", systemImage: "arrowshape.forward.fill")
                    .font(.body)
            }

Posted by

IFA

Thank you so much!

—
Kenties

Add a Comment

Answer 3

There's a problem in your code structure.

In AccountRegistrationView, you have a link to ConfirmationView.

And in ConfirmationView, you call AccountRegistrationView. Which creates a circular reference.

If I understand well your intent, ConfirmationView is just to display information.

A simple way to do this is to pass the values as parameters.

struct AccountRegistrationView: View {

    @State private var userName = ""
    @State private var email = ""
    @State private var pass = ""
    
    var body: some View {
        NavigationStack {
            VStack() {
                Text("Welcome to XXXXXXXXX!")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.mint)
                    .padding(10.0)
                Text("Enter your user name, email address and password.")
                    .font(.body)
                    .multilineTextAlignment(.center)
                    .frame(width: 320.0, height: 50.0)
            }
            VStack {
                TextField("User name", text: $userName)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                TextField("Email address", text: $email)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                TextField("Password", text: $pass)
                    .multilineTextAlignment(.center)
                    .padding(.all, 20.0)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }
            NavigationLink {
                ConfirmationView(name: userName, mail: email, pswd: pass)
            } label: {
                Label("Next", systemImage: "arrowshape.forward.fill")
                    .font(.body)
            }
        }
    }
    
    struct ConfirmationView: View {
        
        // let userInfo = AccountRegistrationView()
        var name = ""
        var mail = ""
        var pswd = ""
        
        var body: some View {
            Text("User name: \(name)") // \(userInfo.userName)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Email address: \(mail)") // \(userInfo.email)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
            Text("Password: \(pswd)") // \(userInfo.pass)")
                .multilineTextAlignment(.center)
                .padding(.all, 20.0)
        }
    }
    
    struct AccountRegistrationView_Previews: PreviewProvider {
        static var previews: some View {
            AccountRegistrationView()
        }
    }
}

Capture d’écran 2023-06-04 à 12.25.03.png

Posted by

Claude31

Add a Comment

Answer 4

Thank you both very much for your prompt replies! I see that I did not specify the arguments in NavigationLink on ConfirmationView. Thank you very much for your very clear explanation and correct code. Much appreciated:-)

Posted by

Kenties

Add a Comment

How can I display a text typed in Textfield on first view (page) to second view (page)?

Accepted Reply

Replies