How to show text only if button is pressed

@Binding var totalScore: Int

    

    @State private var questionIndex = 0

    @State private var answerIndex = 0

    @State private var userAnswer: String = " "

    

    let button = ["Confirm Answer"]

    @State public var buttonConfirm = [Int]     

    let buttons = ["Check Answer"]

    @State public var buttonCheck: Int?

    

    var body: some View {

            VStack(spacing: 1.0) {

                

                //Multiple Choice Question Appears

                VStack {

                    Text(MemorySA[questionIndex].question)

                        .foregroundColor(Color(red: 0.945, green: 0.442, blue: 0.022))

                        .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10))

                    

                    //VStack Allowing User To Enter Their Response

                    VStack {

                        TextField(

                            "Enter Answer",

                            text: $userAnswer

                        )

                        .disableAutocorrection(true)

                        .padding(.top, 10)

                        .foregroundColor(Color.clear)

                        

                    }

                    .textFieldStyle(.roundedBorder)

                    .shadow(radius: 1)

                    .padding([.leading, .trailing], 15)

                    

                }

                //Confirm Answer Button

                HStack(spacing: 15) {

                    Spacer()

                    ForEach(0..<button.count, id: .self) {button in

                        Button {

                            

                            //Increases Score By 1 If Answer Is Correct

                            if questionIndex == 0 {

                                answerIndex += 0 }

                            

                            else if questionIndex == 1 {

                                answerIndex += 0 }

                            

                            else if questionIndex == 2 {

                                answerIndex += 1 }

                            

                            // Make sure the index doesn't go beyond the array size

                            if MemorySA.count > answerIndex + 1 {

                                answerIndex += 1

                            }

                        } label: {

                            Text("Check")

                                .padding(.vertical, 12.5)

                                .padding(.horizontal, 145)

                                .foregroundColor(.white)

                                .background(2 == button ? Color.primary: Color.secondary)

                                .clipShape(Capsule())

                            

                        }

                        

                        //'Continue' Button is Disabled if User Has Not Selected Values

                        .clipShape(Capsule())

                        

                    }

                    Spacer()

                }

                

                Text((MemorySA[answerIndex].answer))

                    .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10))

                

                Spacer()

                

            }

            //Shows User Current Quiz Score

            Text("Total Score = (totalScore)")

            

            HStack(spacing: 15) {

                ForEach(0..<button.count, id: .self) {button in

                    Button {

                        

                        // Make sure the index doesn't go beyond the array size

                        if MemorySA.count > questionIndex + 1 {

                            questionIndex += 1

                        }

                    } label: {

                        //Disables Button If Answer Box Is Empty

                        ZStack {

                            if questionIndex != 2 {

                                Text("Confirm Answer")

                                .foregroundColor(.white) }

                            if questionIndex == 2 {

                                NavigationLink("Confirm Answer", destination: MemoryLAView())

                                .foregroundColor(.white)}

                            

                        }}

                    

                    .padding(.vertical, 12.5)

                    .padding(.horizontal, 120)

                    .foregroundColor(.white)

                    .foregroundStyle(.background)

                    .background(2 == button ? Color.primary: Color.secondary)

                    .clipShape(Capsule())

Hi, I understand this code probably looks confusing however im trying to only show the 'Text((MemorySA[answerIndex].answer))' line of code if the button is clicked. Is there any way I can adapt the above code?

Answered by Claude31 in 711150022

Yes, it is really confusing, without a complete code of the class. And hard to check and test…

if the button is clicked.

Which button, there are many.

//'Continue' Button is Disabled

There is no Continue button here

So your code once formatted is:

        HStack(spacing: 15) {
          ForEach(0..<button.count, id: .self) {button in
            Button {
              
            } label: {
                Text("Check")
                  .padding(.vertical, 12.5)
                  .padding(.horizontal, 145)
                  .foregroundColor(.white)
                  .background(2 == button ? Color.primary: Color.secondary)
                  .clipShape(Capsule())
                 
              }
               
              //'Continue' Button is Disabled if User Has Not Selected Values
              .clipShape(Capsule())
               
            }
          Spacer()
          }
         
      Text((MemorySA[answerIndex].answer))
          .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10))

The principle would be to declare a state var, that the button action toggles

    @State var fire = false  

    // … More code here

        HStack(spacing: 15) {
          ForEach(0..<button.count, id: .self) {button in
            Button {
                fire = true // or fire.toggle()
            } label: {
                Text("Check")
                  .padding(.vertical, 12.5)
                  .padding(.horizontal, 145)
                  .foregroundColor(.white)
                  .background(2 == button ? Color.primary: Color.secondary)
                  .clipShape(Capsule())
                 
              }
               
              //'Continue' Button is Disabled if User Has Not Selected Values
              .clipShape(Capsule())
               
            }
          Spacer()
          }
         
     if fire { Text((MemorySA[answerIndex].answer))
          .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10)) }

That's just the principle, impossible to say more without the full code

I still don't get what you're trying to do. So you have a MemorySA array of answers. Then each answer options will list as a button. You gonna click one of them. Then it should remove all the buttons and only show a text of the actual answer?

Accepted Answer

Yes, it is really confusing, without a complete code of the class. And hard to check and test…

if the button is clicked.

Which button, there are many.

//'Continue' Button is Disabled

There is no Continue button here

So your code once formatted is:

        HStack(spacing: 15) {
          ForEach(0..<button.count, id: .self) {button in
            Button {
              
            } label: {
                Text("Check")
                  .padding(.vertical, 12.5)
                  .padding(.horizontal, 145)
                  .foregroundColor(.white)
                  .background(2 == button ? Color.primary: Color.secondary)
                  .clipShape(Capsule())
                 
              }
               
              //'Continue' Button is Disabled if User Has Not Selected Values
              .clipShape(Capsule())
               
            }
          Spacer()
          }
         
      Text((MemorySA[answerIndex].answer))
          .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10))

The principle would be to declare a state var, that the button action toggles

    @State var fire = false  

    // … More code here

        HStack(spacing: 15) {
          ForEach(0..<button.count, id: .self) {button in
            Button {
                fire = true // or fire.toggle()
            } label: {
                Text("Check")
                  .padding(.vertical, 12.5)
                  .padding(.horizontal, 145)
                  .foregroundColor(.white)
                  .background(2 == button ? Color.primary: Color.secondary)
                  .clipShape(Capsule())
                 
              }
               
              //'Continue' Button is Disabled if User Has Not Selected Values
              .clipShape(Capsule())
               
            }
          Spacer()
          }
         
     if fire { Text((MemorySA[answerIndex].answer))
          .padding(EdgeInsets(top: 10, leading: 10, bottom: 0, trailing: 10)) }

That's just the principle, impossible to say more without the full code

I still don't get what you're trying to do. So you have a MemorySA array of answers. Then each answer options will list as a button. You gonna click one of them. Then it should remove all the buttons and only show a text of the actual answer?

How to show text only if button is pressed
 
 
Q