title: SwiftUI Picker in Form - Index out of Range
body: <p>When I try to display selected data of the picker in a Text(), there is an error called &quot;Index out of range&quot; occurs.</p>
  <p><img src="https://i.stack.imgur.com/Cw39v.png" alt="Image of error message" /></p>
  <p>However, it works fine when I commented the Text() that display the selected data. Below is the codes for picker in form.</p>
  <pre><code>struct VMPickerView: View {
      
      @State var vmIndex = 0
      @ObservedObject var stockViewModel = StockViewModel()
  
      var body: some View {
          
          let allVM = self.stockViewModel.arrKey
  
          return VStack {
          
              Form {
                  
                  Section {
                      
                      Picker(selection: $vmIndex, label: Text(&quot;Location&quot;)) {
                          
                          ForEach(0..&lt;allVM.count, id: \.self) {
                              
                              Text(allVM[$0]).tag($0)
                          }
                      }
                      //Text(allVM[vmIndex])
                  }
              }
          }
      }
  }
  </code></pre>
  <p>Below is the image of my application when I commented the &quot;Text(allVM[vmIndex])&quot;</p>
  <p><img src="https://i.stack.imgur.com/gBKwi.png" alt="Screen 1" /></p>
  <p><img src="https://i.stack.imgur.com/F2SXK.png" alt="Screen 2" /></p>
  <p>Below is the codes that I used to retrieve data from firebase and store into the array.</p>
  <pre><code>class StockViewModel: ObservableObject {
      
      @Published var itemList = [ItemList]()
      @Published var arrKey = [String]()
      
      init() {
          retrieveAllVM()
      }
      
      func retrieveAllVM() {
          
          var arrKey = [String]()
         
          let ref = Database.database().reference().child(&quot;VM&quot;)
  
          ref.observeSingleEvent(of: .value, with: { snapshot in
              for items in snapshot.children {
                  let itemSnap = items as! DataSnapshot
                  let allKey = itemSnap.key
                  arrKey.append(allKey)
              }
              self.arrKey = arrKey
              print(self.arrKey)
         })
      }
  }
  </code></pre>
  <p>*My codes after changes made:</p>
  <pre><code>class StockViewModel: ObservableObject {
      
      @Published var itemList = [ItemList]()
      @Published var arrKey = [String]()
      
      func retrieveAllVM() {
          
          var arrKey = [String]()
         
          let ref = Database.database().reference().child(&quot;VM&quot;)
  
          ref.observeSingleEvent(of: .value, with: { snapshot in
              for items in snapshot.children {
                  let itemSnap = items as! DataSnapshot
                  let allKey = itemSnap.key
                  arrKey.append(allKey)
              }
              DispatchQueue.main.async {
                  self.arrKey = arrKey
                  print(self.arrKey)
              }
              //self.arrKey = arrKey
         })
      }
  }
  </code></pre>
  <pre><code>struct VMPickerView: View {
      
      @State var vmIndex = 0
      @ObservedObject var stockViewModel: StockViewModel
  
      var body: some View {
          
          let allVM = self.stockViewModel.arrKey
  
          return VStack {
          
              Form {
                  
                  Section {
                      
                      Picker(selection: $vmIndex, label: Text(&quot;Location&quot;)) {
                          
                          ForEach(0..&lt;allVM.count, id: \.self) {
                              
                              Text(allVM[$0]).tag($0)
                          }
                      }
                      //Text(allVM[vmIndex])
                  }
              }
          }.onAppear {
              self.stockViewModel.retrieveAllVM()
          }
      }
  }
  </code></pre>