(SwiftUI) How can I access the match I have found from one array in another in ViewBuilder?

Question

I have two arrays.

maschineItems: [MaschineItem]

maschines: [Maschine]

Both objects have the property "name"

In my View I want to check whether the name of a maschineItem exists in the array of the machines. I want to make a 'light Bubble' for all the maschineItems which exists in machines and a 'dark Bubble' for all the maschineItems which doesnt exist in machines.

Here is my code (which works):

import SwiftUI
import Combine

struct OverviewView: View {
    
    @FetchRequest(fetchRequest: MaschineItem.getAllMaschines()) var maschineItems:FetchedResults<MaschineItem>
    @State var networkManager = NetworkManager()
    
    var body: some View {
        
        NavigationView{
            ScrollView{
                VStack(spacing: 30) {
                    ForEach(maschineItems) { maschineItem in
                        if NetworkManager.maschines.contains(where: {$0.name == maschineItem.name}) {
                            
                            BubbleView(locationText: "TEST LOCATION", textIo: "/", textnIo: "/", maschineItem: maschineItem, color: .dividerBackground, opacity: 0.25)
                            
                        }else {
                            BubbleView(locationText: "Unknown device", textIo: "/", textnIo: "/", maschineItem: maschineItem, color: .gray, opacity: 0.5)
                        }
                    }
                }
            }
            .navigationBarTitle("Übersicht", displayMode: .large)    
        }
    }

Now I want to let the Bubbles contains information about the machines. So I have to initialize the match before the if statement, isn't it? But when I do so:

    var body: some View {
        
        NavigationView{
            ScrollView{
                VStack(spacing: 30) {
                    ForEach(maschineItems) { maschineItem in
                        if let maschines = NetworkManager.maschines.first(where: {$0.name == maschineItem.name}) {
                            
                            BubbleView(locationText: "\(maschines.location.building) / \(maschines.location.workcell)", textIo: "\(maschines.resultCountiO)", textnIo: "\(maschines.location.resultCountniO)", maschineItem: maschineItem, color: .dividerBackground, opacity: 0.5)
                            
                        }else {
                            BubbleView(locationText: "Unknown device", textIo: "/", textnIo: "/", maschineItem: maschineItem, color: .gray, opacity: 0.5)
                        }
                    }
                }
            }
            .navigationBarTitle("Übersicht", displayMode: .large)   
        }
    }

I get the following error in the line of the if statement:

Closure containing control flow statement cannot be used with function builder 'ViewBuilder'

How can I fix this problem? I researched a lot and I found similar threads, which showed me that I have to use the array.first(where: {}) method, but I found nothing which helped me with this problem. And yes, I tried to make a function because logic is wrong in views. But when I write all this in a func, than the same error occurs.

I am really thankful for all who tries to help me. PS: Im German, sorry for the English :D

Answer 1

I would use a computed variable that provides the data you need, avoiding the if let. In my example I have added a computed variable (matchedMachines) which is an array of tuples. The first value in the tuple is the Machine instance. The second value is a Bool that indicates whether the machine was found or not.

//
//  ContentView.swift
//  BubbleTest
//
//  Created by Paul Wilkinson on 26/6/20.
//

import SwiftUI

struct Machine: Identifiable {
    let id = UUID()
    let name: String
    let colour: String
}

struct ContentView: View {
    
    var machines = [Machine(name: "Bob", colour: "Grey"), Machine(name:"Susan",colour: "Purple"), Machine(name: "Mary", colour: "Red"), Machine(name: "Peter", colour: "Green")]
    
    var names = ["Bob","Mary"]
    
    var matchedMachines: [(Machine,Bool)]  {
        get {
            return machines.map { ($0, names.contains($0.name))
            }
        }
    }
    
    var body: some View {
        VStack(spacing:30) {
            ForEach(matchedMachines, id: \.0.id ) { machineTuple in
                BubbleView(bubbleColor: machineTuple.1 ? .blue:.gray) {
                    Text(machineTuple.0.name)
                    Text("Location: \(machineTuple.1 ? "Test Location" : "Location Unknown")")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct BubbleView<Content: View>: View {
    let content: Content
    var bubbleColor: Color
    
    init(bubbleColor: Color, @ViewBuilder content: () -> Content) {
        self.bubbleColor = bubbleColor
        self.content = content()
    }
    
    var body: some View {
        VStack {
            content
        }
        .padding()
        .background(bubbleColor)
        .cornerRadius(12.0)
    }
    
}

struct BubbleView_Previews: PreviewProvider {
    static var previews: some View {
        BubbleView(bubbleColor: .blue) {
            Text("Hello world")
        }
    }
}