Components (JSX)

For

Creates a list of elements from a list.

Receives a map function as its child and returns a JSX element for each list item; if the list is empty, an optional fallback is rendered instead.

The child callback shape follows the keying mode:

Default / keyed={true} receives (item, index) where item is the raw row value and index is an accessor.
keyed={false} receives (item, index) where item is an accessor and index is a stable number.
keyed={(item) => key} receives accessors for both arguments.

Import

import { For } from "solid-js";

Type signature

function For<T extends readonly any[], U extends SolidElement>(props: {
  each: T | undefined | null | false;
  fallback?: SolidElement;
  keyed?: true;
  children: (item: T[number], index: Accessor<number>) => U;
}): SolidElement;
function For<T extends readonly any[], U extends SolidElement>(props: {
  each: T | undefined | null | false;
  fallback?: SolidElement;
  keyed: false;
  children: (item: Accessor<T[number]>, index: number) => U;
}): SolidElement;
function For<T extends readonly any[], U extends SolidElement>(props: {
  each: T | undefined | null | false;
  fallback?: SolidElement;
  keyed: (item: T[number]) => any;
  children: (item: Accessor<T[number]>, index: Accessor<number>) => U;
}): SolidElement;

Examples

<For each={items} fallback={<div>No items</div>}>
  {(item, index) => <div data-index={index()}>{item.label}</div>}
</For>

Last updated: 7/4/26, 6:21 PMEdit this pageReport an issue with this page