For

For is a declarative component that unifies list rendering and empty-state handling. While React developers commonly use Array.map(), handling empty or null data often requires extra conditionals. For consolidates iteration and fallback behavior into a single, readable construct.

function For<T extends Array<unknown>>(props: {
  each: T | null | undefined;
  children: (item: T[number], index: number) => React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

Basic usage#

Render list items declaratively and provide a fallback to display when the array is empty, null, or undefined.

import { For } from '@ilokesto/utilinent';

function TodoList({ todos }) {
  return (
    <For each={todos} fallback={<div>할 일이 없습니다.</div>}>
      {(todo, index) => <div key={index}>{todo.text}</div>}
    </For>
  );
}

DOM-preserving variants#

Variants such as For.ui or For.div let you keep the outer DOM node present while swapping inner content, preserving layout and avoiding CSS reflow issues when the list changes.

<For.ul each={items} className="list">
  {(item, index) => <li key={index}>{item.name}</li>}
</For.ul>

Forrable#

Forrable is a special component used inside For that is useful for mixing static content with dynamic lists. While For.ul always renders, only the Forrable inside it repeats for each item in the array. This allows you to maintain fixed elements like headers or footers while repeating only specific parts.

import { For, Forrable } from '@ilokesto/utilinent';

function ProductList({ products }) {
  return (
    <For.ul each={products} className="product-list">
      <li className="header">Product List</li>
      <Forrable>
        {(product, index) => (
          <li key={index}>
            {product.name} - {product.price}
          </li>
        )}
      </Forrable>
      <li className="footer">Total: {products.length} items</li>
    </For.ul>
  );
}