#State var not updating View as expected - swiftui

Question

I have the view below which instantiates a row of buttons, which I intend to make selectable (only one at a time).
//#State var currentSelectedIndex = 0
//var rooms: [Room]
ScrollView(.horizontal, showsIndicators: false, content: {
HStack {
ForEach(rooms.indices) { roomIndex in
Button(action: {
currentSelectedIndex = roomIndex
}) {
UserSelectionIcon(room: rooms[roomIndex], selected: roomIndex == currentSelectedIndex)
.padding(10)
}
}
}
})
When one is selected, it should show a blue circle around it. This is the line in my UserSelectionIcon object referenced above that should do this;
//#State var selected: Bool = false
Circle()
.strokeBorder(selected ? Color.blue.opacity(0.7) : Color.clear, lineWidth: 2)
This line does work, as the first index is selected and showing the blue circle. However, clicking any of the buttons does not reveal the blue circle around them. The currentSelectedIndex variable is being updated as expected.

Answer 1

In the UserSelectionIcon you have to use Bindings to access the currentSelectedIndex instead of States, as States won't update if you change a value in another view.
Therefore you have to safe the Bool 'selected' as Binding in your UserSelectionIcon view. Change this:
#State var selected: Bool = false
to this:
#Binding var selected: Bool
and than just refactor this call:
UserSelectionIcon(room: rooms[roomIndex], selected: roomIndex == currentSelectedIndex)
to this one:
UserSelectionIcon(room: rooms[roomIndex], selected: Binding(get: { roomIndex == currentSelectedIndex }, set: {_,_ in }))
Now you're wrapping the comparison of the two indices into a binding which will all the time represent the latest comparison of both indices. If you're passing just the comparison then it's like a one-time-value which won't refresh it's result if one of the indices is updated. But now the comparison is reevaluated every time you access the binding when selecting which color should be chosen for the stroke border.
Alternative Solution:
You should refactor this:
UserSelectionIcon(room: rooms[roomIndex], selected: roomIndex == currentSelectedIndex)
to this (to pass the State variable):
UserSelectionIcon(room: rooms[roomIndex], currentSelectedIndex: currentSelectedIndex)
and in your UserSelectionIcon you should to refactor this line:
#State var selected: Bool = false
to:
#Binding var currentSelectedIndex: Bool
and every icon should save it's index itself to compare it later:
var roomIndex: Int
then you can compare these two indices when displaying the border.
.strokeBorder(currentSelectedIndex == roomIndex ? Color.blue.opacity(0.7) : Color.clear, lineWidth: 2)