{
  "id": "3b1814e333dd5d46a2b0c550",
  "source": "solid:signals",
  "type": "github-document",
  "title": "for",
  "content": "---\ntitle: \u003cFor\u003e\norder: 5\nuse_cases: \u003e-\n  rendering lists, dynamic arrays, data iteration, collections, tables,\n  repeating elements\ntags:\n  - lists\n  - iteration\n  - components\n  - arrays\n  - rendering\n  - performance\nversion: '1.0'\ndescription: \u003e-\n  Efficiently render lists in SolidJS with the For component. Provides keyed\n  iteration with minimal DOM updates for dynamic array rendering.\n---\n\nThe `\u003cFor\u003e` component is used to render a list of items. It is similar to the `.map()` function in JavaScript.\n\n```ts\nimport { For } from \"solid-js\"\nimport type { JSX } from \"solid-js\"\n\nfunction For\u003cT, U extends JSX.Element\u003e(props: {\n\teach: readonly T[]\n\tfallback?: JSX.Element\n\tchildren: (item: T, index: () =\u003e number) =\u003e U\n}): () =\u003e U[]\n```\n\nA referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument:\n\n```jsx\n\u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t{(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e}\n\u003c/For\u003e\n```\n\nThe `each` prop can also be a function that returns a list. This is useful for creating a loop that depends on a state value:\n\n```jsx\n\u003cFor each={stateSignal()}\u003e{(item) =\u003e \u003cdiv\u003e{item}\u003c/div\u003e}\u003c/For\u003e\n```\n\nThe optional second argument is an index signal:\n\n```jsx\n\u003cFor each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t{(item, index) =\u003e (\n\t\t\u003cdiv\u003e\n\t\t\t#{index()} {item}\n\t\t\u003c/div\u003e\n\t)}\n\u003c/For\u003e\n```\n\n## Props\n\n| Name       | Type                                  | Description                                                      |\n| :--------- | :------------------------------------ | :--------------------------------------------------------------- |\n| `each`     | `readonly T[]`                        | The list of items to render.                                     |\n| `fallback` | `JSX.Element`                         | A fallback element to render while the list is loading.          |\n| `children` | `(item: T, index: () =\u003e number) =\u003e U` | A callback that returns a JSX element for each item in the list. |",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/for.mdx",
  "metadata": {
    "path": "src/routes/reference/components/for.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1993,
    "source_type": "github"
  },
  "hash": "462af71fccb8ca4a65c12c9338274fc7f60e2c92c335788ef18daf0a3c74e732",
  "timestamp": "2026-02-23T11:43:00.188993832+01:00"
}