{"record":{"id":"dfed92444b26bec0","repo":"facebook/react","slug":"the-argument-must-be-a-react-element-but-you-pass","errorCode":null,"errorMessage":"The argument must be a React element, but you passed ${element}.","messagePattern":"The argument must be a React element, but you passed (.+?)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/jsx/ReactJSXElement.js","lineNumber":772,"sourceCode":"    __DEV__ && oldElement._debugStack,\n    __DEV__ && oldElement._debugTask,\n  );\n  if (__DEV__) {\n    // The cloned element should inherit the original element's key validation.\n    if (oldElement._store) {\n      clonedElement._store.validated = oldElement._store.validated;\n    }\n  }\n  return clonedElement;\n}\n\n/**\n * Clone and return a new ReactElement using element as the starting point.\n * See https://reactjs.org/docs/react-api.html#cloneelement\n */\nexport function cloneElement(element, config, children) {\n  if (element === null || element === undefined) {\n    throw new Error(\n      `The argument must be a React element, but you passed ${element}.`,\n    );\n  }\n\n  let propName;\n\n  // Original props are copied\n  const props = assign({}, element.props);\n\n  // Reserved names are extracted\n  let key = element.key;\n\n  // Owner will be preserved, unless ref is overridden\n  let owner = !__DEV__ ? undefined : element._owner;\n\n  if (config != null) {\n    if (hasValidRef(config)) {\n      owner = __DEV__ ? getOwner() : undefined;","sourceCodeStart":754,"sourceCodeEnd":790,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react/src/jsx/ReactJSXElement.js#L754-L790","documentation":"React.cloneElement requires an existing element as its first argument; passing null or undefined throws immediately with the offending value embedded in the message. The guard exists because cloneElement has no meaningful 'clone of nothing' and would otherwise fail later with a confusing crash.","triggerScenarios":"React.cloneElement(props.children, {prop}) when children is undefined (<Comp />) or explicitly null; cloning a variable assigned from a conditional that produced no element.","commonSituations":"Wrapper/HOC components that clone this.props.children without checking it exists; children passed through optional props or slot patterns that can be empty.","solutions":["Guard with React.isValidElement(children) before cloneElement","Use React.Children.map(children, child => cloneElement(child, props)) which safely handles empty/multiple children","Fix the caller to always pass one element child when the component requires it"],"exampleFix":"// before\nfunction Enhance({children, extra}) {\n  return cloneElement(children, {extra}); // throws when children is undefined\n}\n<Enhance extra={1} />;\n\n// after\nfunction Enhance({children, extra}) {\n  if (!isValidElement(children)) return null;\n  return cloneElement(children, {extra});\n}","handlingStrategy":"type-guard","validationCode":"// Guard before cloning children\nimport {isValidElement, cloneElement, Children} from 'react';\nfunction cloneChild(child, props) {\n  return isValidElement(child) ? cloneElement(child, props) : null;\n}\n// or for collections:\nconst cloned = Children.map(children, child =>\n  isValidElement(child) ? cloneElement(child, {extra: true}) : child,\n);","typeGuard":"const isCloneableElement = (v: unknown): v is React.ReactElement =>\n  React.isValidElement(v);","tryCatchPattern":null,"preventionTips":["Never call cloneElement directly on props.children; validate with isValidElement first or use Children.map","Make optional-children components handle the empty case explicitly (render null)"],"tags":["cloneelement","isvalidelement","children","null-argument"],"backgroundTag":"cloneelement-invalid-element","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}