{"record":{"id":"93fc0e86b30add8f","repo":"facebook/react","slug":"374","errorCode":"374","errorMessage":"Event handlers cannot be passed to Client Component props.%s\nIf you need interactivity, consider converting part of this to a Client Component.","messagePattern":"Event handlers cannot be passed to Client Component props\\.(.+?)\nIf you need interactivity, consider converting part of this to a Client Component\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightServer.js","lineNumber":4267,"sourceCode":"        return serializeTemporaryReference(request, tempRef);\n      }\n    }\n\n    if (enableTaint) {\n      const tainted = TaintRegistryObjects.get(value);\n      if (tainted !== undefined) {\n        throwTaintViolation(tainted);\n      }\n    }\n\n    if (isOpaqueTemporaryReference(value)) {\n      throw new Error(\n        'Could not reference an opaque temporary reference. ' +\n          'This is likely due to misconfiguring the temporaryReferences options ' +\n          'on the server.',\n      );\n    } else if (/^on[A-Z]/.test(parentPropertyName)) {\n      throw new Error(\n        'Event handlers cannot be passed to Client Component props.' +\n          describeObjectForErrorMessage(parent, parentPropertyName) +\n          '\\nIf you need interactivity, consider converting part of this to a Client Component.',\n      );\n    } else if (\n      __DEV__ &&\n      (jsxChildrenParents.has(parent) ||\n        (jsxPropsParents.has(parent) && parentPropertyName === 'children'))\n    ) {\n      const componentName = value.displayName || value.name || 'Component';\n      throw new Error(\n        'Functions are not valid as a child of Client Components. This may happen if ' +\n          'you return ' +\n          componentName +\n          ' instead of <' +\n          componentName +\n          ' /> from render. ' +\n          'Or maybe you meant to call this function rather than return it.' +","sourceCodeStart":4249,"sourceCodeEnd":4285,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightServer.js#L4249-L4285","documentation":"A function value reached a prop whose name matches /^on[A-Z]/ — React's convention for event handlers. Functions cannot be serialized from Server Components to Client Components, and event handlers specifically must run in the browser, so this case gets a dedicated message that also points at the fix (convert the interactive part to a Client Component).","triggerScenarios":"<ClientButton onClick={() => save(id)} /> rendered from a Server Component; passing onChange/onSubmit handlers down through a props object; cloneElement injecting onXxx props inside server-rendered layout code.","commonSituations":"Converting an existing client page to RSC and letting a handler closure cross the boundary; shared UI kits whose handler props are used from server trees; copy-pasted interactive snippets into server files.","solutions":["Move the interactive piece into a 'use client' component that owns its own handler.","Expose the behavior as a Server Action: mark the function 'use server' and pass that reference instead.","Restructure props to data only (an action id or preset key the client component maps to a local handler)."],"exampleFix":"// before — Server Component\n<SaveButton onClick={() => save(row.id)}>Save</SaveButton>\n\n// after — the behavior is a server action\n// actions.ts\n'use server';\nexport async function save(id: string) { /* ... */ }\n\n// SaveButton.tsx\n'use client';\nexport function SaveButton({id}) {\n  return <button formAction={save.bind(null, id)}>Save</button>;\n}","handlingStrategy":"type-guard","validationCode":"export function findFunctionProps(props: Record<string, unknown>): string[] {\n  return Object.entries(props)\n    .filter(([, v]) => typeof v === 'function')\n    .map(([k]) => k);\n}\n// DEV guard before returning JSX from a server component:\nconst bad = findFunctionProps(props);\nif (bad.length) throw new Error('non-serializable props: ' + bad.join(', '));","typeGuard":"export function isEventHandlerProp(name: string, value: unknown): boolean {\n  return /^on[A-Z]/.test(name) && typeof value === 'function';\n}","tryCatchPattern":null,"preventionTips":["Mark interactive components 'use client'; keep server files passing data only.","Use 'use server' actions for cross-boundary behavior, never closures.","Lint against function props on components imported into server files."],"tags":["event-handlers","props","functions","server-components"],"backgroundTag":"server-component-props","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}