Same content in 2 cards

Question

Hello there! I'm trying to create something in SwiftUI, but there's a problem: I can't have 2 cards with the same content, does anyone know a way to have the same emojis in 2 separate cards?

Here's my code:

import PlaygroundSupport
import SwiftUI

struct ContentView: View {
    var emojis: [String] = ["🐶", "🐱", "🐱", "🦊", "🦁", "🐝", "🐼", "🐷", "🐮"]
    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            ForEach(emojis, id: \.self, content: { emoji in
                emojiView(content: emoji)
            })
    }
}

    struct emojiView: View {
        var content: String = ""
        var body: some View {
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .frame(width: 90, height: 120)
                    .foregroundColor(.yellow)
                Text(content).font(.largeTitle)
            }
        }
    }
}


PlaygroundPage.current.setLiveView(ContentView())

222

Posted by

Balvir-255

Reply

Add a Comment

Answer 1

That's because they have the same id in ForEach loop. In fact, the error messages are quite explicit.

ForEach<Array, String, emojiView>: the ID 🐱 occurs multiple times within the collection, this will give undefined results!

LazyVGridLayout: the ID 🐱 is used by multiple child views, this will give undefined results!

This works:

struct MyEmoji : Hashable {
    var char: String
    var num: Int
}

struct ContentView39: View {

    var emojis : [MyEmoji] = [MyEmoji(char: "🐶", num: 0), MyEmoji(char: "🐱", num: 1), MyEmoji(char: "🐱", num: 2), MyEmoji(char: "🦊", num: 3), MyEmoji(char: "🦁", num: 4), MyEmoji(char: "🐝", num: 5), MyEmoji(char: "🐼", num: 6), MyEmoji(char: "🐷", num: 7), MyEmoji(char: "🐮", num: 8)]

    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            ForEach(emojis, id: \.self, content: { emoji in
                emojiView(content: emoji.char)
            })
    }
}

Posted by

Claude31

Thanks very much!

—
Balvir-255
Another way is to create an id = UUID() in the struct, instead of num. And create with simply MyEmoji(char: "🐶") and use .id instead of .self.

—
Claude31

Add a Comment

Answer 2

That's because they have the same id in ForEach loop. In fact, the error messages are quite explicit.

ForEach<Array, String, emojiView>: the ID 🐱 occurs multiple times within the collection, this will give undefined results!

LazyVGridLayout: the ID 🐱 is used by multiple child views, this will give undefined results!

This works:

struct MyEmoji : Hashable {
    var char: String
    var num: Int
}

struct ContentView39: View {

    var emojis : [MyEmoji] = [MyEmoji(char: "🐶", num: 0), MyEmoji(char: "🐱", num: 1), MyEmoji(char: "🐱", num: 2), MyEmoji(char: "🦊", num: 3), MyEmoji(char: "🦁", num: 4), MyEmoji(char: "🐝", num: 5), MyEmoji(char: "🐼", num: 6), MyEmoji(char: "🐷", num: 7), MyEmoji(char: "🐮", num: 8)]

    var body: some View {
        LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
            ForEach(emojis, id: \.self, content: { emoji in
                emojiView(content: emoji.char)
            })
    }
}

Posted by

Claude31

Thanks very much!

—
Balvir-255
Another way is to create an id = UUID() in the struct, instead of num. And create with simply MyEmoji(char: "🐶") and use .id instead of .self.

—
Claude31

Add a Comment

Same content in 2 cards

Accepted Reply

Replies