mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
update
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
Reference in New Issue
Block a user