Menu Project - Weird Output

General Discussion
1

Please can you help? I have part way through completing the Menu project on the website, and I get a weird output as shown in the attaced screenshot. I have looked on Google and tried ChatGPT but can’t find a cause of the problem. My MenuView code is as follows:

type or pastestruct MenuView: View {
    // to store data for each menu item, as created in MenuItem struct

    let menuItems:[MenuItem] = [MenuItem(name: "Onigiri", price: "1.99", imageName: "onigiri"),
                                MenuItem(name: "Meguro Sushi", price: "5.99", imageName: "meguro-sushi"),
                                MenuItem(name: "Tako Sushi", price: "4.99", imageName: "tako-sushi"),
                                MenuItem(name: "Avocado Maki", price: "2.99", imageName: "avocado-maki"),
                                MenuItem(name: "Tobiko Spicy Maki", price: "4.99", imageName: "tobiko-spicy-maki"),
                                MenuItem(name: "Salmon Sushi", price: "4.99", imageName: "salmon-sushi"),
                                MenuItem(name: "Hamachi Sushi", price: "6.99", imageName: "hamachi-sushi"),
                                MenuItem(name: "Kani Sushi", price: "3.99", imageName: "kani-sushi"),
                                MenuItem(name: "Tamago Sushi", price: "3.99", imageName: "tamago-sushi"),
                                MenuItem(name: "California Roll", price: "3.99", imageName: "california-roll"),
                                MenuItem(name: "Shrimp Sushi", price: "3.99", imageName: "shrimp-sushi"),
                                MenuItem(name: "Ikura Sushi", price: "5.99", imageName: "ikura-sushi")]
    
    // begun this code below in lesson 5, go back to beginning of lesson and redo
    var body: some View {
        
        List(menuItems) { item in
            // note use of keyword 'in'
            HStack{
                Image(item.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(height: 50)
                    .cornerRadius(10)
                
                Text(item.name)
                    .bold()
            
                
                Spacer()
                // Puts "$" + item.price on right side of HStack
                Text("$" + item.price)
                    .bold()
                
            }
            //  removes separator line on list
            listRowSeparator(.hidden)
            // note this only works when you put it on the HStack itself. This is because the HSTack represents each Row. THis will not work if you put it in the List level.
            listRowBackground(Color.brown)
                .opacity(0.1) code here

and the MenuItem Struct is here:

import Foundation

// this Struct will refer to data for a single menu item
struct MenuItem: Identifiable{ //*
    var id: UUID = UUID() //*
    var name:String
    var price:String
    var imageName:String

Thank you, Paul

Screenshot 2025-11-03 at 11.55.31
Screenshot 2025-11-03 at 11.55.31856×1794 139 KB

2

@pjohnstone

Hi Paul,

Welcome to the community.

When you apply a modifier such as listiRowSeparator() or listRowBackground() you must place a fullstop in front of it like this:

.listRowSeparator(.hidden)
.listRowBackground()

Also with regard to listRowBackground the code related to that must all go inside the parenthesis like this:

.listRowBackground( Color.brown.opacity(0.1) )

or to make it more readable, like this:

.listRowBackground(
    Color(.brown)
        .opacity(0.1)
)

Here’s the entire view code for your example:

struct MenuView: View {
    // to store data for each menu item, as created in MenuItem struct

    let menuItems:[MenuItem] = [MenuItem(name: "Onigiri", price: "1.99", imageName: "onigiri"),
                                MenuItem(name: "Meguro Sushi", price: "5.99", imageName: "meguro-sushi"),
                                MenuItem(name: "Tako Sushi", price: "4.99", imageName: "tako-sushi"),
                                MenuItem(name: "Avocado Maki", price: "2.99", imageName: "avocado-maki"),
                                MenuItem(name: "Tobiko Spicy Maki", price: "4.99", imageName: "tobiko-spicy-maki"),
                                MenuItem(name: "Salmon Sushi", price: "4.99", imageName: "salmon-sushi"),
                                MenuItem(name: "Hamachi Sushi", price: "6.99", imageName: "hamachi-sushi"),
                                MenuItem(name: "Kani Sushi", price: "3.99", imageName: "kani-sushi"),
                                MenuItem(name: "Tamago Sushi", price: "3.99", imageName: "tamago-sushi"),
                                MenuItem(name: "California Roll", price: "3.99", imageName: "california-roll"),
                                MenuItem(name: "Shrimp Sushi", price: "3.99", imageName: "shrimp-sushi"),
                                MenuItem(name: "Ikura Sushi", price: "5.99", imageName: "ikura-sushi")]

    // begun this code below in lesson 5, go back to beginning of lesson and redo
    var body: some View {

        List(menuItems) { item in
            // note use of keyword 'in'
            HStack {
                Image(item.imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(height: 50)
                    .cornerRadius(10)

                Text(item.name)
                    .bold()


                Spacer()
                // Puts "$" + item.price on right side of HStack
                Text("$" + item.price)
                    .bold()

            }
            //  removes separator line on list
            .listRowSeparator(.hidden)
            // note this only works when you put it on the HStack itself. This is because the HSTack represents each Row. THis will not work if you put it in the List level.
            .listRowBackground(
                Color.brown
                    .opacity(0.1)
            )
        }
    }
}


#Preview {
    MenuView()
}
1 Like
3

Thank you, that fixed it, much appreciated!