After appending element to array it should show more elements - arrays

Question

This is how it looks before and after..
I have a ForEach Loop, and when I click on the card, it appends a new element to the array and then IT SHOULD SHOW 2 CARDS.
But there is still one card. (but I appended the new card element)
So what should I do?
struct TimelineFromUserView: View {
var card: [Card] = cardData
var body: some View {
VStack {
HStack {
Text("History").bold()
.font(.largeTitle)
.padding(.top, 20)
.padding(.leading, 20)
Spacer()
}
Divider()
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 30) {
ForEach(card) { item in
CardForTimeline(card: item)
.onTapGesture {
print("juhuu")
cardData.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
print(cardData)
}
.padding()
}
}
.padding(.top, 10)
}
}
}
}
struct Card: Identifiable{
var id = UUID()
var number: Int
var start: String
var end: String
var days: Int
var success: Bool
}
var cardData: [Card] = [
Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]

Answer 1

You only pass a copy card of the array cardData into the ForEach but if I understand your code snippets correctly it should be the original array cardData.
If that's not the problem it would be helpful to post more of your code.

Answer 2

I just replace CardForTimeline on Text (because I didn't have your CardForTimeline) and it return me 2 (also I replaced print(cardData) on print(cardData.count)). You can create fully new project and add this code. It will print 2, 3, 4, 5 after taps
struct ContentView: View {
var card: [Card] = cardData
var body: some View {
VStack {
HStack {
Text("History").bold()
.font(.largeTitle)
.padding(.top, 20)
.padding(.leading, 20)
Spacer()
}
Divider()
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 30) {
ForEach(card) { item in
Text(verbatim: "we")
.onTapGesture {
print("juhuu")
cardData.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
print(cardData.count)
}
.padding()
}
}
.padding(.top, 10)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Card: Identifiable{
var id = UUID()
var number: Int
var start: String
var end: String
var days: Int
var success: Bool
}
var cardData: [Card] = [
Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]

Answer 3

the problem is that SwiftUI does not know to update the view. Try writing
#State private var card: [Card] = [
Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]
instead of: var card: [Card] = cardData.
This should work because then you are telling SwiftUI that it should update the view whenever the value changes.
Additionally you would have to change the adding part of your code to this:
.onTapGesture {
self.card.append(Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
}
The above is an approach using a local #State property to manage the state. You could also use a observable object with an array of cards instead. This could look like this:
struct ContentView: View {
#ObservedObject private var cardData = CardData()
var body: some View {
VStack {
HStack {
Text("History").bold()
.font(.largeTitle)
.padding(.top, 20)
.padding(.leading, 20)
Spacer()
}
Divider()
ScrollView(.vertical, showsIndicators: false) {
VStack(spacing: 30) {
ForEach(cardData.cards) { card in
Text(card.id.uuidString)
.onTapGesture {
self.cardData.add(card: Card(number: 2, start: "01.10.2021", end: "20.10.2021", days: 19, success: false))
}
.padding()
}
}
.padding(.top, 10)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Card: Identifiable{
var id = UUID()
var number: Int
var start: String
var end: String
var days: Int
var success: Bool
}
class CardData: ObservableObject {
// store the cards and make sure its get-only from the outside
#Published private(set) var cards = [
Card(number: 1 ,start: "05.06.2020", end: "15.06.2020", days: 10, success: true)
]
// MARK: - Intents for modifing the cards, add additional if needed
func add(card: Card) {
self.cards.append(card)
}
}
I hope this will help you with your problems