How do I select single items out of an array in SwiftUI? - xcode

Question

I am new to coding and I want to select a single Item out of an array. So far I have built an array of items (pretty similar to what you can see on "Tinder" for example) but If I tab on one of the items all of the others will be filled blue as well. Does any one know how do modify the code so it will work? Thank you in advance.
import SwiftUI
struct WhatInterestsYouView: View {
let sportsSelectionItems = ["NFL", "CollegeFootball", "soccer", "baseball", "tennis", "Icehockey", "Gym", "running", "climbing"]
let layout = [GridItem(.adaptive(minimum: 80))]
#State private var sportsSelectionItemIsSelected:Bool = false
var body: some View {
LazyVGrid (columns: layout, spacing: 10) {
ForEach(sportsSelectionItems, id: \.self) { selectionItem in
Text(selectionItem)
.onTapGesture {
sportsSelectionItemIsSelected.toggle()
}
.font(.footnote)
.padding(.all, 5)
.background(RoundedRectangle(cornerRadius: 10).fill(sportsSelectionItemIsSelected ? Color.blue : Color.gray.opacity(0.1)))
}
}
}
}
struct WhatInterestsYouView_Previews: PreviewProvider {
static var previews: some View {
WhatInterestsYouView()
}
}

Answer 1

The problem is "sportsSelectionItemIsSelected:Bool" is just a flag common in the View and it is not bound to any item in the array. so once it becomes true, it remains true for all the items in array.
Instead, have the selected item of array stored and compare it with items in loop and fill it out with your color. like this,
#State private var selectedItem: String?
var body: some View {
LazyVGrid (columns: layout, spacing: 10) {
ForEach(sportsSelectionItems, id: \.self) { selectionItem in
Text(selectionItem)
.onTapGesture {
selectedItem = selectionItem
}
.font(.footnote)
.padding(.all, 5)
.background(RoundedRectangle(cornerRadius: 10).fill(selectedItem == selectionItem ? Color.blue : Color.gray.opacity(0.1)))
}
}
}