This app was created with "create-sprout-app"

Dynamic text content

Increase Counter

The app was built using the debug option --allowAppScopeAccess Which allows you to access the global State object of the app via the console To see reactivity in action:

Open the console. Type: const state = sproutApps..getGlobalState() state variable now contains the global state object. Type: state.dynamicText = "Hello dynamic text!". Click enter, and watch how the text above automagically change.

Mapping State Arrays to Lists of Custom Components

The following div has a "_map" command that maps an array of State objects to <list-item> custom components:

State Attributes

There is a hidden div here, with its hidden attribute bound to an isHidden State value. Click the button to toggle that state.

Conditional Rendering