For
For renders an array by calling children(item, index). If each is null, undefined, or empty, it renders fallback.
import { For } from '@ilokesto/utilinent';
<For each={users} fallback={<p>No users found.</p>}>
{(user) => <UserCard key={user.id} user={user} />}
</For>Props
| Prop | Type | Description |
|---|---|---|
each | `T[] | null |
children | (item, index) => ReactNode | Render function for each item. |
fallback | ReactNode | Empty-state UI. Defaults to null. |
Tag form
<For.ul each={todos} fallback={<li>No todos</li>} className="todos">
{(todo) => <li key={todo.id}>{todo.title}</li>}
</For.ul>The tag form creates the wrapper element. Use matching child elements (li inside ul) to keep semantic HTML valid.
Keys
For does not invent keys. Return keyed elements from your render function when rendering arrays.
<For each={items}>{(item) => <Row key={item.id} item={item} />}</For>