Async Data Loading
Load data asynchronously for use in form fields.
Loading Options for SelectField
function OrderForm() {
const [products, setProducts] = useState<Array<{ id: string, name: string }>>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const loadProducts = async () => {
try {
const data = await fetch('/api/products').then(r => r.json());
setProducts(data);
} finally {
setLoading(false);
}
};
loadProducts();
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<CommandForm command={CreateOrder}>
<SelectField<CreateOrder>
value={c => c.productId}
title="Product"
options={products}
optionIdField="id"
optionLabelField="name"
placeholder="Select a product..."
required
/>
<NumberField<CreateOrder> value={c => c.quantity} title="Quantity" min={1} required />
</CommandForm>
);
}
Dependent Dropdowns
Load options based on another field's value:
function LocationForm() {
const command = useCommandInstance(SaveLocation);
const [cities, setCities] = useState<Array<{ id: string, name: string }>>([]);
useEffect(() => {
if (command.country) {
// Load cities for selected country
const loadCities = async () => {
const data = await fetch(`/api/cities?country=${command.country}`)
.then(r => r.json());
setCities(data);
};
loadCities();
} else {
setCities([]);
}
}, [command.country]);
return (
<CommandForm command={SaveLocation}>
<SelectField<SaveLocation>
value={c => c.country}
title="Country"
options={countries}
optionIdField="id"
optionLabelField="name"
required
/>
<SelectField<SaveLocation>
value={c => c.city}
title="City"
options={cities}
optionIdField="id"
optionLabelField="name"
placeholder={command.country ? "Select a city..." : "Select country first"}
required
/>
</CommandForm>
);
}