'How can I update sibling components in React?
So, I have the next structure in my code:
I have a Table component, in which each row represent a region. Each one is a Collapsable component, and inside, it has a Transfer List component (https://v4.mui.com/components/transfer-list/). In the left list, I have a list of zones assigned to the region, and on the right list, I have the zones that haven't been assigned to any region. When you make any changes to the list, the database is modified to reflect said changes. On first load, every right list on every region is the same (because the zones that aren't assigned are the same for everyone), and they should always reflect the same information.
Now, I can do the udpates just fine, but my problem is that whenever I make a change in one region (move any element from one list to the other), that change isn't reflected on the other lists. I have to collapse the row and open it again to see the changes, and I can't make it so all the lists will reload whenever I change any one of them.
For reference, I tried declaring a state in my Table component, and passing both it and the stateChange function to all the lists so I can listen for changes, but it isn't working. I'm pretty new to React, and I don't know which part of the code I should post, so if I can clarify anything, please feel free to ask.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
