For

For renders arrays with an optional empty-state fallback. It replaces map plus extra conditionals with a single declarative block.

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 items with a callback and provide fallback for empty, null, or undefined arrays.

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#

Use For.ul or For.div to keep a container element while swapping the inner list.

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

Keys and stable rendering#

Provide stable key values on the elements returned by the render function.

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

function ProductList({ products }) {
  return (
    <For each={products}>
      {(product) => <ProductCard key={product.id} product={product} />}
    </For>
  );
}