I know this topic has surfaced before, but a clear-cut solution still eludes me. Here’s the scenario I’m grappling with:
My fictitious application resides on a single page titled “Page”, hosting several reusable elements: 1) “Popup A”, 2) “Popup B”, and 3) a “Menu” with multiple buttons. My objective is straightforward: trigger either Popup A or B based on which button is clicked in the Menu.
From my current understanding, employing the Page as a mediator—leveraging a custom state (e.g., “Show Popup”) to monitor state changes initiated from the Menu—seems to be a one solution. This approach feels complicated and difficult to maintain at scale. Perhaps I’m overlooking a more streamlined method?
Does anyone have insights into a simpler or more efficient solution? If you’re aware of any resources or threads that delve into this, please point me in their direction.
Thank you in advance for your time and advice. Looking forward to your suggestions!
I agree… it’s unnecessarily complicated, even with your very basic example (it’s even worse with more complex set ups).
A much simpler, and cleaner way, in my opinion, is is to use a JavaScript to Bubble element on the page (or inside the other REs), then call that element as a JavaScript function from within your REs (you can pass whatever data you need to into the function call).
Then when the JS2Bubbble element is triggered, run whatever Bubble action you need to run.
I find this a lot simpler to maintain, and much less complicated that truing to do it the ‘Bubble’ way, using Custom States…
If it’s not too much trouble, can you elaborate on the JavaScript to Bubble solution? I don’t think I understand the “then call that element as a JavaScript function” part.
