How To pass a nested state from a Symbol to a parent page

[ahmed_builder]

This is how you pass a state from a symbol to a parent page. This use case is helpful when you need to persist data between a symbol and a parent page.

Follow these 3 Steps:

1. Symbol Reference set to inherit State.

   Set Your Symbol Reference on the Parent page to true
   Click on your Symbol Reference → Edit → Advanced Options → set Inherit state (true)
   

   
   
   This will enable inheritance of the parent component state and data.

2. Initialize the nested object in Parent Page

   This is the part where you create a state object in Page.
   In your Page go to the Right Menu → Data → code → Edit Content JS + CSS.
   Initialize the object that you passing data to in the symbol parent
   example:
   state.nested = {}

3. Create the nested state object values in Symbol
   First you have to create The nested state in your symbol.
   In your Symbol go to the Right Menu → Data → code → Edit Content JS + CSS.
   Add the values that you passing to the parent element (in the case the parent page that
   utilizes the symbol).

   example:

   state.nested?.user = 'Joe'
   state.nested?.role = 'Admin'
   state.nested?.isUsed = true; 
   

Return to your Page. Click on Your Referenced Symbol → Data → Content State you can see the nested object added to your state.