I'm pulling down a list of Gif images from Firebase and displaying them using a WebView. I loop through my Set<URL> of Gif images and throw them into the WebView sitting inside a Scroller. Here's the function:

    private func gifGallery() -> some View {

        ScrollView(.horizontal, showsIndicators: false) {

            //LazyHGrid(rows: [GridItem(.flexible())], spacing: 4) {
            HStack(spacing: 6) {

                ForEach(Array(gifImages.gifListUrls)) { gifImageUrl in
                    Button(action: {
//                        Button Action

                    }){
                        WebView(url: gifImageUrl)
                    }
                }
                .frame(width: 300, height: 165)
            }
        }
    }

I'm stuck with the "Button" functionality I'd like to incoporate. While each Gif is now tappable as a button, When the user taps an image, I'd like to update that image's border color and background color to be green or something, indicating it has been selected.

Given that these images are URL data types, I'm having trouble comparing them and thus updating the border and background coloring. If they were strings, it would be cake.

How can I get them to add border coloring when tapped?

The URL type has an == operator to compare two URLs. What trouble are you having comparing your two URLs?

I've made a bit of progress now. Here's the updated function. The problem now is clicking one item sets the border across each image. I think I'm missing something related to the IDs of each item in the loop?

The ternary updates on the bordercolor do work, but it just gets applied across all images.

    private func gifGallery() -> some View {

        ScrollView(.horizontal, showsIndicators: false) {

            //LazyHGrid(rows: [GridItem(.flexible())], spacing: 4) {
            HStack(spacing: 6) {

                ForEach(Array(gifImages.gifListUrls), id: \.self) { gifImageUrl in
                    Button(action: {
//                        Button Action
                        selectedGifName = gifImageUrl
                        chosenImage = selectedGifName == gifImageUrl
                    }){
                        WebView(url: gifImageUrl)
                            .border(Color(#colorLiteral(red: 0.3411764801, green: 0.6235294342, blue: 0.1686274558, alpha: 1)), width: chosenImage ? 4 : 0)
                    }
                }
                .frame(width: 300, height: 165)
            }
        }
    }

Result

Didn't realize you can do that!

Thank you!