Home App Docs Blog Github

Why is state not getting passed down to my symbols?

By design, Symbols in Builder have separate state from the parent content. What this means is that if you set a property on state in the parent content (e.g. state.someVariable = 'red'), state.someVariable is not available within the symbol. If you try to access state.someVariable within the symbol, you will get undefined. The same goes for the other way around, if you define a state property within a symbol it will not be available in the parent content.

If you would like to pass data (state) into symbols, you can use inputs to pass down any data you need to use inside the symbol. If you are trying to pass custom data or functionality into a symbol and are using custom components, another option is to use context to make functions and other data available inside your whole page (including any symbols). To do that, see this example

I am able to bind parent property to child symbol as follows:
Parent has goalList array that need to pass to goals Symbol (goals symbol uses state.goals array to render goal list).

Created +NEW BINDING for symbol as component.options.symbol.data.goals=state.goalList
Here goals on left hand side is array that is responsible for rendering goals list.