title: SwiftUI bug? ScrollView , Data Sources, Did Load?
body: <p>I have a for each loop which works for ONE data source but not the other. The data sources are identical. They contain the exact same data. This WORKS:</p>
  
  <pre><code>struct FirstCarousel: View {
  
   let firstDataCollection =  StartingCollection.startingCollectionData()
   let secondDataCollection = SecondCollection.secondCollectionData()
  
   var body: some View {
    VStack(alignment: .leading){
     Text("List")
      .font(.headline)
  
     ScrollView(.horizontal, content: {
      HStack{
       ForEach( firstDataCollection, id: \.self) { collectTwo in
        TopCarouselCard(collection: collectTwo)
        .frame(maxWidth: 112,  alignment: .topLeading)
       }
      }
     })
    }
   }
  }
  </code></pre>
  
  <p>But when I replace with:</p>
  
  <pre><code>ForEach( secondDataCollection, id: \.self) { collectTwo in...
  </code></pre>
  
  <p>It does NOT work.</p>
  
  <p>The data collections:</p>
  
  <pre><code>import SwiftUI
  import UIKit
  
  struct StartingCollection: Identifiable, Hashable{
      var id: Int
      let title: String
      let image: String
  
      static func startingCollectionData() -&gt; [StartingCollection]{
          return [StartingCollection(id: 01, title:"One", image: "red"),
                  StartingCollection(id: 02, title:"Two", image: "green"),
                  StartingCollection(id: 03, title:"Three", image: "yellow"),
                  StartingCollection(id: 04, title:"Four", image: "blue")
                  ]
      }
  }
  
  struct SecondCollection: Identifiable, Hashable{
      var id: Int
      let title: String
      let image: String
  
      static func secondCollectionData() -&gt; [SecondCollection]{
          return [SecondCollection(id: 01, title:"One", image: "red"),
                  SecondCollection(id: 02, title:"Two", image: "green"),
                  SecondCollection(id: 03, title:"Three", image: "yellow"),
                  SecondCollection(id: 04, title:"Four", image: "blue")
                  ]
      }
  }
  </code></pre>
  
  <p>Now, one thing to note: the ForEach loop works in the sense that it iterates over the array correctly. If I replace the enclosure with:</p>
  
  <pre><code>HStack{
   ForEach( secondDataCollection, id: \.self) { collectTwo in
    Text("Hello")
   }
  </code></pre>
  
  <p>I get the correct number of "Hellos" based on the size of the data source. The following also works:</p>
  
  <pre><code>HStack{
   ForEach( secondDataCollection, id: \.self) { collectTwo in
    Text(collectTwo.title)
   }
  </code></pre>
  
  <p>This does NOT work:</p>
  
  <pre><code>ForEach( secondDataCollection, id: \.self) { collectTwo in
   TopCarouselCard(collection: collectTwo)
   .frame(maxWidth: 112,  alignment: .topLeading)
  }
  </code></pre>
  
  <p>BUT, if I change the data source it DOES work.</p>
  
  <p>As a side note, this view is embedded in a main view which includes another carousel that follows the same exact format. The other carousel works regardless of the data source.</p>
  
  <pre><code>struct LookView: View {
   var body: some View {
    NavigationView {
     ScrollView(.vertical, content: {
      VStack(spacing:0){
       FirstCarousel()
       FreeCarousel()
      }
     })
     .navigationBarTitle("Choose Your Theme")
    }
   }
  }
  </code></pre>
  
  <p>The carousel views are identical. The other view also has the same issue when I change data sources.</p>
  
  <p>Is this a compiler bug? Is there something I'm overlooking, or a need to load somehow? </p>
  
  <p>UPDATE:
  As noted in the comments, one thing missing was the TopCarouselCard View which is where the issue was. In this case:</p>
  
  <pre><code>struct ApplyScreen: View {
   var collection: StartingCollection
  </code></pre>
  
  <p>This is what caused the error because it was specifically expecting a collection that is a StartingCollection.</p>