Swift ForEach with non constant range View Refresh

Question

I know it's a simple question, but I haven't found an answer. I want to understand the underlying concept.

I'm trying to update a ForEach with a non constant range, the closing parameter is a variable that is assigned to a button.

The variable is assigned with a @State so it's supposed to refresh the view. Somehow it's not working.

import SwiftUI

struct ContentView: View {
    @State private var numberOfTimes = 5
    let timesPicker = [2,5,10,12,20]
    @State private var tableToPractice = 2
    enum answerState {
        case unanswered
        case wrong
        case right
    }
    func listRange(){
        
    }
    
    var body: some View {
        NavigationView{
            HStack{
                VStack{
                    Form{
                        Section {
                            Picker("Tip percentage", selection: $numberOfTimes) {
                                ForEach(timesPicker, id: \.self) {
                                    Text($0, format: .number)
                                }
                            }
                            .pickerStyle(.segmented)
                        } header: {
                            Text("How many times do you want to practice?")
                        }
                        Section{
                            Stepper("Table to practice: \(tableToPractice.formatted())", value: $tableToPractice, in: 2...16 )
                        }
                            Button("Start Now", action: listRange).buttonStyle(.bordered)
                        

                        
                        List{
                            ForEach(0..<numberOfTimes){
                                Text("Dynamic row \($0)")
                            }
                        }
                    }.foregroundColor(.gray)
                }
            }
        }
    }
}

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

Answer 1

The problem is that the range is not identified. Lets make some rows

    struct Row: Identifiable {
        let id = UUID()
    }

Then set up an array of identifiable items

    @State private var numberOfTimes = 5
    @State private var rows = Array(repeating: Row(), count: 5)

Now you can have a responsive list

    List{
        ForEach(rows) { row in
            Text("Dynamic row")
        }
    }

Call the on change update to recreate the array

    .onChange(of: numberOfTimes) { newValue in
        rows = Array(repeating: Row(), count: newValue)
        numberOfTimes = newValue
    }

the onChange should be called on the Form.

This will make more sense when you have better view model data, see apple documentation for a more in depth example.

This is for lazy v stack, but the data model setup is what I'm thinking of

https://developer.apple.com/documentation/swiftui/grouping-data-with-lazy-stack-views