{"record":{"id":"1bdb9682c5d0ea44","repo":"honojs/hono","slug":"children-only-expects-only-one-child","errorCode":null,"errorMessage":"Children.only() expects only one child","messagePattern":"Children\\.only\\(\\) expects only one child","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/jsx/children.ts","lineNumber":15,"sourceCode":"import type { Child } from './base'\n\nexport const toArray = (children: Child): Child[] =>\n  Array.isArray(children) ? children : [children]\nexport const Children = {\n  map: (children: Child[], fn: (child: Child, index: number) => Child): Child[] =>\n    toArray(children).map(fn),\n  forEach: (children: Child[], fn: (child: Child, index: number) => void): void => {\n    toArray(children).forEach(fn)\n  },\n  count: (children: Child[]): number => toArray(children).length,\n  only: (_children: Child[]): Child => {\n    const children = toArray(_children)\n    if (children.length !== 1) {\n      throw new Error('Children.only() expects only one child')\n    }\n    return children[0]\n  },\n  toArray,\n}\n","sourceCodeStart":1,"sourceCodeEnd":21,"githubUrl":"https://github.com/honojs/hono/blob/e2740d5a1bd0b4254e517e3af8b60789284bc7bd/src/jsx/children.ts#L1-L21","documentation":"Children.only() is a React-compatible helper in hono/jsx that returns the single child of a component. It throws unless the children array, after flattening via toArray, contains exactly one element — zero or multiple children both fail.","triggerScenarios":"Calling Children.only(children) in a component whose JSX has no children (`<Layout />`), multiple children (`<Layout><A/><B/></Layout>`), or children that flatten to an array of length ≠ 1 (nested arrays, fragments with several items).","commonSituations":"Writing layout components that expect exactly one child (e.g. a single trigger button) and receiving conditionally rendered or wrapped children; refactoring from Children.map to Children.only; whitespace/text nodes counting as extra children.","solutions":["Ensure the component using Children.only receives exactly one child element in every usage","Wrap multiple children in a single fragment or container element","Guard with Children.count or Children.toArray before calling only, and render a fallback or throw a clearer error"],"exampleFix":"// before\nfunction Frame(props: { children: Child[] }) {\n  const child = Children.only(props.children) // throws if 0 or 2+ children\n  return <div>{child}</div>\n}\n// after\nfunction Frame(props: { children: Child[] }) {\n  const arr = Children.toArray(props.children)\n  if (arr.length !== 1) throw new Error(`Frame expects 1 child, got ${arr.length}`)\n  return <div>{arr[0]}</div>\n}","handlingStrategy":"type-guard","validationCode":"const children = Children.toArray(props.children)\nif (children.length !== 1) throw new RangeError(`expected 1 child, got ${children.length}`)","typeGuard":"const hasSingleChild = (c: Child[]): boolean => Children.toArray(c).length === 1","tryCatchPattern":"null","preventionTips":["Document components that require exactly one child","Wrap multi-child content in a fragment before passing","Check Children.count in dev mode with a clear custom error"],"tags":["hono","jsx","children","react-compat"],"backgroundTag":"children-only-single-child","analyzedSha":"e2740d5a1bd0b4254e517e3af8b60789284bc7bd","analyzedAt":"2026-08-28T10:18:08.750Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}