State
States manage the data within solutions, s, and components and controls the UI dynamically. The state allows solutions and components to change their output in response to user inputs and actions. Examples of using state include:
- Displaying a list of items that change based on user interaction.
- Handling user inputs in forms, such as text inputs or switches. By storing input values in the state, you can easily control the components and validate user input.
- Control the behavior of components, like showing or hiding a component based on a condition, enabling or disabling buttons or fields, and resetting a component's value.
- State is local to the or component where it is declared; you can share the state across multiple s and their components or use a global state across the entire solution.
State allows you to read and write the state of various data in your solution at runtime.
Whenever working with data, consider the performance impact on the at runtime. The best practice is to write only the required data in the state and consider using state versus inputs and outputs.
States vary based on the context in which they are used. Use IntelliSense (ctrl+space) in expressions to determine where you can make use of states. IntelliSense can assist by directing you to the context tree, showing which states are available for use within the context of the .
Syntax | Key |
key | |
activeItemId amounts filter isHorizontal isSelectable isSelectActive searchText selected value | |
data isDirty isValid response | |
amount checked selected | |
data filter isValid isDirty isPending searchText selected response value | |
amount checked |
The table below provides links to various examples of configuring state in the jigx-samples .
Scenario | Key | GitHub jigx-samples examples |
Set an item to active with onPress | ActiveItemId | |
searchText (component level) | searchText | |
filter and searchText (jig level) | filter searchText | |
Saving data to a provider | value | |
Evaluating an amount | amount | |
Evaluating if an item is selected | checked | |
Evaluating selected items | selected | |
Reset a form | reset-state (action) | |
Set state on an active item in a list when the onPress event executes | set-state (action) |
- Developer reference