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

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.

1 Like