The For component provides a declarative way to render lists and arrays in React, with automatic empty state handling and support for numeric ranges.
When to Use
- Render lists of items from arrays
- Generate repeated elements from a count
- Display fallback UI when lists are empty
- Avoid manual
.map() calls with cleaner syntax
- Render list containers with semantic HTML
Basic Usage
import { For } from "@zayne-labs/ui-react/common/for";
const users = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" },
];
function UserList() {
return (
<For each={users}>
{(user) => (
<div key={user.id}>
<h3>{user.name}</h3>
</div>
)}
</For>
);
}
Component API
For
Renders items without a wrapper element.
Array to iterate over, or a number to generate a range [0…n-1]
children
(item: T, index: number, array: T[]) => React.ReactNode
Render function called for each item. Receives item, index, and full array
renderItem
(item: T, index: number, array: T[]) => React.ReactNode
Alternative to children prop for rendering items
Content to display when the array is empty or count is 0
ForWithWrapper
Renders items inside a container element.
as
React.ElementType
default:"ul"
Container element type
Whether to show fallback instead of empty container when list is empty
All other props for the container element (className, style, etc.)
Examples
List with Fallback
import { For } from "@zayne-labs/ui-react/common/for";
function TodoList({ todos }) {
return (
<For
each={todos}
fallback={
<div className="empty-state">
<p>No todos yet!</p>
<button>Add your first todo</button>
</div>
}
>
{(todo) => (
<div key={todo.id} className="todo-item">
<input type="checkbox" checked={todo.completed} />
<span>{todo.text}</span>
</div>
)}
</For>
);
}
Numeric Range for Skeletons
import { For } from "@zayne-labs/ui-react/common/for";
function ProductListSkeleton() {
return (
<div className="product-grid">
<For each={8}>
{(index) => (
<div key={index} className="skeleton-card">
<div className="skeleton-image" />
<div className="skeleton-title" />
<div className="skeleton-price" />
</div>
)}
</For>
</div>
);
}
With Container Element
import { ForWithWrapper } from "@zayne-labs/ui-react/common/for";
function NavigationMenu({ items }) {
return (
<ForWithWrapper
as="nav"
each={items}
className="nav-menu"
role="navigation"
displayFallBackWhenEmpty={true}
fallback={<div>No menu items</div>}
>
{(item) => (
<a key={item.id} href={item.url} className="nav-link">
{item.label}
</a>
)}
</ForWithWrapper>
);
}
Accessing Index and Array
import { For } from "@zayne-labs/ui-react/common/for";
function RankedList({ items }) {
return (
<For each={items}>
{(item, index, array) => (
<div key={item.id}>
<span className="rank">#{index + 1}</span>
<span className="name">{item.name}</span>
<span className="score">{item.score}</span>
{index === array.length - 1 && (
<span className="badge">Last</span>
)}
</div>
)}
</For>
);
}
Semantic List Wrapper
import { ForWithWrapper } from "@zayne-labs/ui-react/common/for";
function FeatureList({ features }) {
return (
<ForWithWrapper
as="ul"
each={features}
className="feature-list"
>
{(feature) => (
<li key={feature.id}>
<strong>{feature.title}</strong>
<p>{feature.description}</p>
</li>
)}
</ForWithWrapper>
);
}
Comparison to Native Patterns
Traditional Map
function UserList({ users }) {
if (users.length === 0) {
return <div>No users found</div>;
}
return (
<div>
{users.map((user, index) => (
<div key={user.id}>
<h3>{user.name}</h3>
</div>
))}
</div>
);
}
With For Component
import { For } from "@zayne-labs/ui-react/common/for";
function UserList({ users }) {
return (
<For each={users} fallback={<div>No users found</div>}>
{(user, index) => (
<div key={user.id}>
<h3>{user.name}</h3>
</div>
)}
</For>
);
}
Common Use Cases
Dynamic Grid Layout
import { For } from "@zayne-labs/ui-react/common/for";
function ImageGallery({ images }) {
return (
<div className="grid grid-cols-3 gap-4">
<For
each={images}
fallback={
<div className="col-span-3 text-center">
<p>No images to display</p>
</div>
}
>
{(image) => (
<img
key={image.id}
src={image.url}
alt={image.alt}
className="rounded-lg"
/>
)}
</For>
</div>
);
}
Breadcrumb Navigation
import { For } from "@zayne-labs/ui-react/common/for";
function Breadcrumbs({ paths }) {
return (
<nav className="breadcrumb">
<For each={paths}>
{(path, index, array) => (
<span key={path.id}>
<a href={path.url}>{path.label}</a>
{index < array.length - 1 && <span className="separator">/</span>}
</span>
)}
</For>
</nav>
);
}
Table Rows
import { ForWithWrapper } from "@zayne-labs/ui-react/common/for";
function DataTable({ rows }) {
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<ForWithWrapper as="tbody" each={rows}>
{(row) => (
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.status}</td>
</tr>
)}
</ForWithWrapper>
</table>
);
}
When using numeric ranges with each={n}, the component generates an array [0, 1, 2, ..., n-1] and passes each number as the item.
The For component automatically checks for empty arrays, null/undefined values, and zero counts before rendering the fallback.