For

Renders one row per item.

Renders one row per item. Rows whose key survives an update keep their DOM and state; only changed items create or dispose rows. The list is read lazily, inside the list memo.

Whether rows are keyed is decided when For is created: it reads key once. When the list is empty and fallback is not given, the result is [undefined], which renders nothing.

Import#

import { For } from "@shadow-js/web";

Signature#

function For<T>(props: ForKeyedProps<T>): Accessor<unknown[]>

function For<T>(props: ForUnkeyedProps<T>): Accessor<unknown[]>

Parameters#

Name	Description
`props`	See ForUnkeyedProps and ForKeyedProps.

Returns#

An accessor of the row values, in input order.

Examples#

import { useSignal } from "@shadow-js/core";
import { For } from "@shadow-js/web";

function TodoList() {
  const [todos] = useSignal([{ id: 1, title: "Write docs" }]);
  return (
    <ul>
      <For each={todos()} key={(todo) => todo.id} fallback={<li>Nothing to do</li>}>
        {(todo) => <li>{todo().title}</li>}
      </For>
    </ul>
  );
}