Components & Context

children

Resolves a children accessor and exposes the result as an accessor with a .toArray() helper. Use this when a component needs to inspect or iterate over its children rather than just render them through.

Import

import { children } from "solid-js";

Type signature

function children(fn: Accessor<SolidElement>): ChildrenReturn;

Parameters

`fn`

An accessor for the children

Return value

An accessor of the resolved children, with .toArray() for iteration

Examples

function List(props: { children: Element }) {
  const items = children(() => props.children);
  return (
    <ul>
      {items.toArray().map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

`ChildrenReturn`

type ChildrenReturn = Accessor<ResolvedChildren> & {
  toArray: () => ResolvedElement[];
};

`ResolvedChildren`

type ResolvedChildren = ResolvedElement | ResolvedElement[];

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