How to allow ForEach layout item to show duplicate item from array in SwiftUI?

Question

I am working with on multiple choose answer quiz app.

var itemsTemp = ["ant","bat", "bear", "bee", "bird", "butterfly", "camel", "cat", "cheetah","chick", "chicken"]

Updated Here is example of my quiz app.

  let answerIndex = Int.random(in: 0...3) // for correct answer
  itemsTemp!.shuffle() // to multiple choose option change.

here is the error:

Thread 1: Fatal error: each layout item may only occur once

Bellow code crashing

LazyVGrid(columns: [GridItem(),GridItem()],spacing: 16) {
       ForEach(itemsTemp) { item in
            VStack {
                    Text(item).id(UUID())
                      .matchedGeometryEffect(id:UUID(), in: namespace, isSource: !show)
                      .onTapGesture{
                               print(" tapped!")
                        }
                    }.matchedGeometryEffect(id: "container\(UUID())", in: namespace)
                 }
              }

it's a quiz app so multiple choose option to select correct answer. array item will be occur in for each loop multiple time.

So need to each layout item multiple occur.

ForEach(itemsTemp , id: \.self), You are saying each value in itemsTemp is unique, but you also have duplicates. — Tushar Sharma, Feb 27 '21 at 08:48
@TusharSharma I updated my question . would you check please now. — Nazmul Hasan, Feb 27 '21 at 09:10

Raja Kishan · Accepted Answer · 2021-02-27T09:17:01.193

1

For the unique identifier. Use a model array instead of a string array.

First, create a model.

struct Item: Identifiable {
    var id = UUID()
    var name: String
}

then, your array is

var itemsTemp: [Item] = [
    .init(name: "ant"),
    .init(name: "bat"),
    .init(name: "ant"),
    .init(name: "bear"),
    .init(name: "bee"),
    .init(name: "ant"),
    .init(name: "butterfly"),
    .init(name: "bear")
]

Now, your loop is

//Other Code
ForEach(itemsTemp, id:\.id) { item in
    //Other Code
}
//Other Code

The second approach is to use .indices.

//Other Code
ForEach(itemsTemp.indices) { index in
    let item = temsTemp[index]
    //Other Code
}
//Other Code

edited Feb 27 '21 at 09:17

answered Feb 27 '21 at 08:53

Raja Kishan

5,529
2
2
15

I guess id parameter is not required in forEach if you use Identifiable protocol. – Tushar Sharma Feb 27 '21 at 08:59
Sorry for my wrong. I just updated my question . would you check it please. – Nazmul Hasan Feb 27 '21 at 09:11
@TusharSharma yes. – Raja Kishan Feb 27 '21 at 09:13
@NazmulHasan I added a second approach. Does this help? – Raja Kishan Feb 27 '21 at 09:39
@RajaKishan it's help but sometime `LazyVGrid` item overlap one by another – Nazmul Hasan Feb 27 '21 at 09:52
Now I think problem is in matchedGeometryEffect – Raja Kishan Feb 27 '21 at 09:55
@RajaKishan is there anyway to resolve to the issue ? – Nazmul Hasan Feb 27 '21 at 09:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229282/discussion-between-nazmul-hasan-and-raja-kishan). – Nazmul Hasan Feb 27 '21 at 09:58

score 1 · Answer 2 · answered Feb 27 '21 at 10:01

try with a model:

struct Item: Identifiable {
var id = UUID()
var name: String
}


class Model: ObservableObject {
    var items: [Item] = [
        .init(name: "ant"),
        .init(name: "bat"),
        .init(name: "ant"),
        .init(name: "bear"),
        .init(name: "bee"),
        .init(name: "ant"),
        .init(name: "butterfly"),
        .init(name: "bear")
    ]
    @Published var itemsSuffled: [Item] = []
    
    init() {
        shuffle()
    }
    
    func shuffle() {
        itemsSuffled = items.shuffled()
    }
}

struct ContentView: View {
    
    @Namespace private var namespace
    @ObservedObject private var model: Model = Model()
    
    var body: some View {
        
        VStack {
            LazyVGrid(columns: [GridItem(),GridItem()],spacing: 16) {
                ForEach(model.itemsSuffled) { item in
                        VStack {
                            Text(item.name).id(UUID())
                                  .matchedGeometryEffect(id:UUID(), in: namespace, isSource: true)
                                  .onTapGesture{
                                           print(" tapped!")
                                    }
                                }.matchedGeometryEffect(id: "container\(UUID())", in: namespace)
                             }
            }
            Button(action: {
                model.shuffle()
            }, label: {
                Text("new shuffle")
            })
        }
        
    }
}

How to allow ForEach layout item to show duplicate item from array in SwiftUI?

2 Answers2