How do I use the NavigationLink Properly with SwiftUI

Question

Brand new coder here and first time user. I apologize if this is too easy for most. I am having an issue using the naviationLink to switch from a context view to a detail view. I want to show a row of of guitars and then show a detail view of the guitar chosen from the table.

Here are some details. I have a Guitars.swift file that contains a list of guitars. (See below)

import Foundation

struct Guitars: Identifiable, Hashable {
    let id: Int
    let name, description, imageName: String
    }

 let guitar: [Guitars] = [
     .init (id: 1, name: "Classical", description: "This is a nylon string guitar that is acoustic and made if cedar or spruce wood", imageName: "classical"),
     .init (id: 2, name: "Acoustic", description: "The acoustic guitar is a steel string instrument that is traditionally played as an accompanying part of a musical performance.", imageName: "acoustic"),
     .init (id: 3, name: "Electric", description: "This is a steel string guitar that is electic with pickups and made to be played through amplifiers", imageName: "electric_guitar-1"),
     .init (id: 4, name: "Banjo", description: "This is a steel string guitar that has five strings.  It's usually played in country and bluegrass music", imageName: "banjo"),
     .init (id: 5, name: "Bass", description: "This is a steel string guitar that has four strings.  It's usually played in all types of bands and provides the bass line for the music", imageName: "bass")

 ]

I have a guitarDetails file that contains a defined property and a struct. (See below)

struct GuitarDetails: View {

    var selectedGuitar: Guitars

    var body: some View {
        VStack{
            Image(selectedGuitar.name)
            .resizable()
            .frame(width:300, height: 300)
            VStack {
                Spacer()

            }
        }
    }
}

struct GuitarDetails_Previews: PreviewProvider {
    static var previews: some View {
        GuitarDetails(selectedGuitar: <#T##Guitars#>)

And lastly, I have a ContentView file where I created the NavigationLink to move from the content view to the detail view but I can't get it to work. Can someone help me out? Here is the content view code.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List (Guitars) { guitar in
                NavigationLink(destination: GuitarDetails(selectedGuitar: guitar) {
           }
         }
       }
      }
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
  }
 }
}

Thee error I get is: "'GuitarDetails.Type' is not convertible to '(Guitars) -> GuitarDetails'

Andrew Andrew · Accepted Answer · 2019-11-13T22:36:16

You need to pass your array of guitar and not the type Guitars in your List. That is why you are getting that error.

Though your naming is not good, you are using plurals for singular items and singular for plural items. This can lead to confusion and it is better to use appropriate terminology for what you are describing.

For example your Guitars struct describes only one guitar so it should really be renamed Guitar. Similarly the array of guitars is named guitar which doesn't make sense as it is an array of guitars so it should really be plural and be named guitars.

Ideally you should have something like this; notice I have used a more appropriate naming convention.

struct Guitar: Identifiable, Hashable {
    let id: Int
    let name, description, imageName: String
}

// defining guitars like this, outside of a class or struct, makes it a global variable.
let guitars: [Guitar] = [
     .init (id: 1, name: "Classical", description: "This is a nylon string guitar that is acoustic and made if cedar or spruce wood", imageName: "classical"),
     .init (id: 2, name: "Acoustic", description: "The acoustic guitar is a steel string instrument that is traditionally played as an accompanying part of a musical performance.", imageName: "acoustic"),
     .init (id: 3, name: "Electric", description: "This is a steel string guitar that is electic with pickups and made to be played through amplifiers", imageName: "electric_guitar-1"),
     .init (id: 4, name: "Banjo", description: "This is a steel string guitar that has five strings.  It's usually played in country and bluegrass music", imageName: "banjo"),
     .init (id: 5, name: "Bass", description: "This is a steel string guitar that has four strings.  It's usually played in all types of bands and provides the bass line for the music", imageName: "bass")
]

Then your GuitarDetail should similar to this:

struct GuitarDetail: View {

    var selectedGuitar: Guitar // notice it is no longer plural, as that didn't make sense

    var body: some View {
        VStack{
            Image(selectedGuitar.imageName) // make sure you use the image name
            .resizable()
            .frame(width:300, height: 300)
            VStack {
                Spacer()

            }
        }
    }
}

And finally your ContentView

struct ContentView: View {
    var body: some View {
        NavigationView {
            // as you have defined guitars above as a global variable you should be able to access it like this
            List (guitars) { guitar in
                NavigationLink(destination: GuitarDetail(selectedGuitar: guitar) {
                    Text(guitar.name) // you need something inside your NavigationLink for it to work
           }
        }
    }
}

How do I use the NavigationLink Properly with SwiftUI

1 Answers