Here is a quick overview of how I figured to pass some simple data from one re-usable element to another on a single page app by using custom states. Maybe this description can help someone else.
The idea is pretty simple; and structured as follows:
App:
–Re-usable element A
–Re-usable element B
Through a set of user selections within A, sets of dropdowns, text inputs etc. I eventually trigger an API action that returns a unique ID based on the user’s selections. But this value is “trapped” within the reusable element A and I needed a way to share/use it in B for next steps.
Within the workflows of re-usable element A, I use a “when condition is true” event (When the API’s returned ID value is not empty) to SET a custom state value of the reusable element A itself. Lets call it reusable element A’s project_id with a type of “text”.
Now one level up on the App page, I have another “when condition is true” workflow. This time it’s "when the re-usable element A’s reusable element project_id is not empty, set the value of re-usable element B’s project_id to the value of A’s project_id.
Now anywhere within B I can use the project_id value as needed.
Once working, the same two workflows steps can have more data “piggybacked” by (+ Set another state) options of each. Say project_id and team_id are both needed in B and available in A, it’s a simple expansion of both A and the App workflow’s to just set/pass more data by first “promoting” the data to the source’s custom states, and then pushing it back down to the destination state by the main page.