mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "121ffcfa67474a6b84d54e40",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "index-component",
|
|
"content": "---\ntitle: \u003cIndex\u003e\nuse_cases: \u003e-\n primitive arrays, non-keyed lists, index-based rendering, static positions,\n simple lists\ntags:\n - lists\n - iteration\n - components\n - arrays\n - primitives\n - index\nversion: '1.0'\ndescription: \u003e-\n Render non-keyed lists in SolidJS with Index component. Perfect for primitive\n arrays where index position matters more than item identity.\n---\n\nNon-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value.\n\n```ts\nimport { Index } from \"solid-js\"\nimport type { JSX } from \"solid-js\"\n\nfunction Index\u003cT, U extends JSX.Element\u003e(props: {\n each: readonly T[];\n fallback?: JSX.Element;\n children: (item: () =\u003e T, index: number) =\u003e U;\n}): () =\u003e U[];\n```\n\nA super simple implementation of this component might look like this:\n\n```tsx\nfunction Index\u003cT, U extends JSX.Element\u003e(props: {\n each: readonly T[];\n fallback?: JSX.Element;\n children: (item: () =\u003e T, index: number) =\u003e U;\n}) {\n return () =\u003e {\n const [items, setItems] = createSignal(props.each);\n return props.each.map((_, i) =\u003e props.children(() =\u003e items()[i], i));\n };\n}\n```\n\nHere's a look at the implementation of the `Index` component in Solid:\n\n```tsx\n\u003cIndex each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n {(item) =\u003e \u003cdiv\u003e{item()}\u003c/div\u003e}\n\u003c/Index\u003e\n```\n\nNotice that the item is a signal unlike the `For` component. This is because the `Index` component is not keyed to the item itself but rather the index.\n\nOptional second argument is an index number:\n\n```tsx\n\u003cIndex each={state.list} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n {(item, index) =\u003e (\n \u003cdiv\u003e\n #{index} {item()}\n \u003c/div\u003e\n )}\n\u003c/Index\u003e\n```\n\n## Props\n\n| Name | Type | Description |\n| :------- | :------------------------------------ | :-------------------------------------------------------------- |\n| each | `readonly T[]` | The array to iterate over. |\n| fallback | `JSX.Element` | Optional fallback element to render while the array is loading. |\n| children | `(item: () =\u003e T, index: number) =\u003e U` | The function that renders the children. |",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/components/index-component.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/components/index-component.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2378,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "d939a3a19bebed5a462acd03a37aacadf18f7a5ae21c0cc9e2769b3f46a94e0f",
|
|
"timestamp": "2026-02-23T11:43:00.189019039+01:00"
|
|
} |