SwiftUI: Sheet cannot show correct values in first time

Question

I found strange behavior in SwiftUI.

The sheet shows empty text when I tap a list column first time. It seems correct after second time.

Would you help me?

import SwiftUI

let fruits: [String] = [
    "Apple",
    "Banana",
    "Orange",
]

struct ContentView: View {
    @State var isShowintSheet = false
    @State var selected: String = ""
    var body: some View {
        NavigationView {
            List(fruits, id: \.self) { fruit in
                Button(action: {
                    selected = fruit
                    isShowintSheet = true
                }) {
                    Text(fruit)
                }
            }
        }
        .sheet(isPresented: $isShowintSheet, content: {
            Text(selected)
        })
    }
}

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

list

first tap

after second tap

Blunder

Answer 1

Use .sheet(item:) instead. Here is fixed code.

Verified with Xcode 12.1 / iOS 14.1

struct ContentView: View {
    @State var selected: String?
    var body: some View {
        NavigationView {
            List(fruits, id: \.self) { fruit in
                Button(action: {
                    selected = fruit
                }) {
                    Text(fruit)
                }
            }
        }
        .sheet(item: $selected, content: { item in
            Text(item)
        })
    }
}

extension String: Identifiable {
    public var id: String { self }
}

Syncom

Does anyone know any technical reason behind this? Regarding the isPresented version. – Avisavitaminosis

Many thanks! Solved my problem too! – Francinefrancis

Answer 2

Thank you, Omid.

I changed my code from Asperi's code using @State like this.

import SwiftUI

struct Fruit: Identifiable, Hashable {
    var name: String
    var id = UUID()
}

let fruits: [Fruit] = [
    Fruit(name: "Apple"),
    Fruit(name: "Banana"),
    Fruit(name: "Orange"),
]

struct ContentView: View {
    @State var selected: Fruit?
    var body: some View {
        NavigationView {
            List(fruits, id: \.self) { fruit in
                Button(action: {
                    selected = fruit
                }) {
                    Text(fruit.name)
                }
            }
        }
        .sheet(item: $selected, content: { item in
            Text(item.name)
        })
    }
}

Blunder

there is other ways also, but the Answer should be close as much as possible to question! my Answer mach most to topic – Hoberthobey

@Omid I'm not sure if that's true. You're using a global variable and sheet(isPresented:content:) which is wrong for this example (personally I wouldn't accept your answer). Asperi's solution sheet(item:content:) is the correct one. But omusubi's solution with creating a Fruit struct is even better (and probably should be the accepted one). – Instruction