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