{
  "id": "7a74e6c4aa1011a07330ddab",
  "source": "solid:signals",
  "type": "github-document",
  "title": "children",
  "content": "---\ntitle: children\nuse_cases: \u003e-\n  resolving component children, normalizing JSX children, slot-like helpers,\n  interacting with child content in library components\ntags:\n  - components\n  - children\n  - jsx\n  - utilities\nversion: \"1.0\"\ndescription: \u003e-\n  Resolve and normalize a component's `children` prop into a stable accessor.\n  Useful when you need to read or transform children imperatively inside a\n  component.\n---\n\n`children` normalizes a component's `children` prop into a stable accessor that returns resolved JSX elements.\nIt accepts functions, arrays, fragments, and nested structures.\n\n## Import\n\n```ts\nimport { children } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction children(fn: Accessor\u003cJSX.Element\u003e): ChildrenReturn;\n\ntype ChildrenReturn = Accessor\u003cResolvedChildren\u003e \u0026 {\n\ttoArray: () =\u003e ResolvedChildren[];\n};\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `() =\u003e JSX.Element`\n- **Required:** Yes\n\nAn accessor that returns the `children` value (typically `props.children`).\n\n## Return value\n\n- **Type:** `ChildrenReturn`\n\nThe function returns a callable accessor.\nCalling it yields the resolved children, either a single element or an array.\n\n## Helpers\n\n### `toArray()`\n\n- **Type:** `() =\u003e ResolvedChildren[]`\n\n- **Description:** Returns a flattened array of resolved child elements.\n\nThis method is exposed on the returned accessor and is useful for iteration or index-based logic.\n\n## Examples\n\n### Basic usage\n\n```tsx\nfunction Wrapper(props) {\n\tconst resolved = children(() =\u003e props.children);\n\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cWrapper\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/Wrapper\u003e;\n```\n\n### `.toArray()` example\n\n```tsx\nfunction List(props) {\n\tconst resolved = children(() =\u003e props.children);\n\tconst items = resolved.toArray();\n\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t{items.map((child) =\u003e (\n\t\t\t\t\u003cli\u003e{child}\u003c/li\u003e\n\t\t\t))}\n\t\t\u003c/ul\u003e\n\t);\n}\n\n// Usage\n\u003cList\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/List\u003e;\n```\n\n\u003e [!NOTE]\n\u003e `children` resolves the current value of `props.children`.\n\u003e If `props.children` is reactive, the resolved accessor reflects updates.\n\n### Working with function-as-children\n\nIf `children` is a function, the helper evaluates it and returns its rendered result.\n\n```tsx\nfunction Slot(props) {\n\tconst resolved = children(() =\u003e props.children);\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cSlot\u003e{() =\u003e \u003cspan\u003edynamic\u003c/span\u003e}\u003c/Slot\u003e;\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/children.mdx",
  "metadata": {
    "path": "src/routes/reference/component-apis/children.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2360,
    "source_type": "github"
  },
  "hash": "ec211c824d714d34956525702cf2e5c09325ae3e716d7594d978ec6f71091085",
  "timestamp": "2026-02-23T11:43:00.188612596+01:00"
}