State Management Examples

Learn how to manage state with q:set, data binding, and variable operations.

All Examples

No examples match your filters.

Featured Example

The simplest way to create and display a variable:

xml

<!-- test-set-simple.q -->
<q:component name="TestSetSimple" xmlns:q="https://quantum.lang/ns">
  <q:set name="x" value="10" />
  <q:return value="x = {x}" />
</q:component>

Key Concepts

Basic Variable Assignment

xml

<q:set name="message" value="Hello, World!" />
<p>{message}</p>

Expressions and Calculations

xml

<q:set name="price" value="100" type="number" />
<q:set name="tax" value="{price * 0.1}" type="number" />
<p>Total: {price + tax}</p>

Arrays and Objects

xml

<q:set name="colors" value='["red", "green", "blue"]' type="array" />
<q:loop items="{colors}" var="color">
  <span>{color}</span>
</q:loop>

Variable Validation

xml

<q:set name="email" value="user@example.com" validate="email" />
<q:set name="age" value="25" type="number" validate="min:18,max:120" />

Loops - Iterate over data
Conditionals - Conditional display based on state
Data Import - Load external data into variables