Swift UI List mismatched sections on Mac Catalyst

Question

Trying to build a list view on Mac using catalyst

Here's my code for the list view. I have three sections (Countries, States, Cities). The data to populate the list are properties of the view. When i run this code on a mac, The cities section is showing the countries data. It looks fine on iPhone and iPad. Attached screenshots

struct ContentView: View {

    
    private var countries: [String] = [ "United States of America",
                                        "Australia",
                                        "India",
                                        "England",
                                        "New zealand",
                                        "Switzerland",
                                        "Canada"]
    
    private var states: [String] =  [ "Colorado",
                                      "Texas",
                                      "Georgia",
                                      "Florida",
                                      "California",
                                      "Arizona",
                                      "Maryland",
                                      "New Jersey",
                                      "North Carolina",
                                      "South Carolina",
                                      "Alabama"]
    
    private var cities: [String] = [ "Los Angeles",
                                     "San Franscisco",
                                     "Atlanta",
                                     "Miami",
                                     "Dallas",
                                     "Austin"]
    
    var body: some View {
        List {
            
            Section(header: Text("Countries")) {
                ForEach(0 ..< countries.count) {
                    Text(countries[$0])
                }
            }
            
            Section(header: Text("States")) {
                ForEach(0 ..< states.count) {
                    Text(states[$0])

                }
            }
            
            Section(header: Text("Cities")) {
                ForEach(0 ..< cities.count) {
                    Text(cities[$0])
                }
            }
            
        }
    }
}

Answer 1

As your ForEach are not identified (all three sections has same indices), try to give rows unique id, like

    List {
        Section(header: Text("Countries")) {
            ForEach(0 ..< countries.count) {
                Text(countries[$0]).id("1.\($0)")
            }
        }
        
        Section(header: Text("States")) {
            ForEach(0 ..< states.count) {
                Text(states[$0]).id("2.\($0)")
            }
        }
        
        Section(header: Text("Cities")) {
            ForEach(0 ..< cities.count) {
                Text(cities[$0]).id("3.\($0)")
            }
        }
    }