@jsvision/ui / For

Function: For()

For<T, N>(each, key, render): () => N[]

Defined in: ui/src/reactive/for.ts:50

Map a reactive list of items to a reconciled, keyed list of nodes.

Type Parameters

T

T

N

N

Parameters

each

() => readonly T[]

Reactive source of the item array.

key

(item, index) => unknown

Returns a stable identity for an item (used directly as a map key). Keys must be unique among the live items — a duplicate dev-warns and resolves last-writer-wins.

render

(item, index) => N

Builds a node for an item, receiving a reactive index accessor. Called once per distinct key — never again for a surviving key when the list reorders.

Returns

A reactive accessor yielding the node array, always in each() order and the same length as each().

() => N[]

Example

import { signal, For } from '@jsvision/ui';

type Task = { id: number; title: string };
const tasks = signal<Task[]>([{ id: 1, title: 'write' }, { id: 2, title: 'ship' }]);
const rows = For(
  () => tasks(),
  (task) => task.id,               // stable key → reorder reuses nodes
  (task, index) => ({ label: `${index()}: ${task.title}` }),
);
rows(); // [{ label: '0: write' }, { label: '1: ship' }]