{"record":{"id":"84fff1971b1224d4","repo":"honojs/hono","slug":"invalid-prop-key-of-type-function-supplied","errorCode":null,"errorMessage":"Invalid prop '${key}' of type 'function' supplied to '${tag}'.","messagePattern":"Invalid prop '(.+?)' of type 'function' supplied to '(.+?)'\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/jsx/base.ts","lineNumber":261,"sourceCode":"        // Do nothing\n      } else if (typeof v === 'number' || (v as HtmlEscaped).isEscaped) {\n        buffer[0] += ` ${key}=\"${v}\"`\n      } else if (typeof v === 'boolean' && booleanAttributes.includes(key)) {\n        if (v) {\n          buffer[0] += ` ${key}=\"\"`\n        }\n      } else if (key === 'dangerouslySetInnerHTML') {\n        if (children.length > 0) {\n          throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.')\n        }\n\n        children = [raw(v.__html)]\n      } else if (v instanceof Promise) {\n        buffer[0] += ` ${key}=\"`\n        buffer.unshift('\"', v)\n      } else if (typeof v === 'function') {\n        if (!key.startsWith('on') && key !== 'ref') {\n          throw new Error(`Invalid prop '${key}' of type 'function' supplied to '${tag}'.`)\n        }\n        // maybe event handler for client components, just ignore in server components\n      } else {\n        buffer[0] += ` ${key}=\"`\n        escapeToBuffer(v.toString(), buffer)\n        buffer[0] += '\"'\n      }\n    }\n\n    if (emptyTags.includes(tag as string) && children.length === 0) {\n      buffer[0] += '/>'\n      return\n    }\n\n    buffer[0] += '>'\n\n    childrenToStringToBuffer(children, buffer)\n","sourceCodeStart":243,"sourceCodeEnd":279,"githubUrl":"https://github.com/honojs/hono/blob/e2740d5a1bd0b4254e517e3af8b60789284bc7bd/src/jsx/base.ts#L243-L279","documentation":"During hono/jsx server-side serialization, function-valued props are only allowed for event handlers (props starting with 'on') and 'ref'. Any other function prop cannot be rendered into HTML, so Hono throws with the offending prop key and tag.","triggerScenarios":"Passing a callback like `formatter`, `renderItem`, `getValue`, `onClick`-mismatched names (e.g. `handleClick` not starting with 'on'), or a `ref`-like prop to a plain string tag (HTML element) in server-rendered JSX.","commonSituations":"Porting React client components to hono/jsx server components and passing render callbacks; passing a function to an intrinsic element where it was previously a client component prop; passing comparator/sorter functions as props on lowercase tags.","solutions":["Rename event-handler props so they start with 'on' (e.g. `handleClick` → `onClick`)","Move non-event function props to a capitalized function component that consumes them instead of passing them to intrinsic elements","For data derived from functions, compute the value before rendering and pass the result as a prop"],"exampleFix":"// before\n<option formatter={(v) => v.toUpperCase()}>{value}</option>\n// after\n<option data-value={value.toUpperCase()}>{value.toUpperCase()}</option>","handlingStrategy":"validation","validationCode":"const safeProps = Object.fromEntries(\n  Object.entries(props).filter(\n    ([k, v]) => !(typeof v === 'function' && !k.startsWith('on') && k !== 'ref')\n  )\n)","typeGuard":"const isSerializableProp = (key: string, v: unknown): boolean =>\n  typeof v !== 'function' || key.startsWith('on') || key === 'ref'","tryCatchPattern":"null","preventionTips":["Keep event-handler prop names prefixed with 'on'","Pass computed values, not functions, to intrinsic elements on the server","Route function props only to capitalized function components"],"tags":["hono","jsx","ssr","props","functions"],"backgroundTag":"function-prop-on-server-component","analyzedSha":"e2740d5a1bd0b4254e517e3af8b60789284bc7bd","analyzedAt":"2026-08-28T10:18:08.750Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}