facebook/react · error · Error

The argument must be a React element, but you passed ${eleme

Error message

The argument must be a React element, but you passed ${element}.

What it means

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.

Source

Thrown at packages/react/src/jsx/ReactJSXElement.js:772

    __DEV__ && oldElement._debugStack,
    __DEV__ && oldElement._debugTask,
  );
  if (__DEV__) {
    // The cloned element should inherit the original element's key validation.
    if (oldElement._store) {
      clonedElement._store.validated = oldElement._store.validated;
    }
  }
  return clonedElement;
}

/**
 * Clone and return a new ReactElement using element as the starting point.
 * See https://reactjs.org/docs/react-api.html#cloneelement
 */
export function cloneElement(element, config, children) {
  if (element === null || element === undefined) {
    throw new Error(
      `The argument must be a React element, but you passed ${element}.`,
    );
  }

  let propName;

  // Original props are copied
  const props = assign({}, element.props);

  // Reserved names are extracted
  let key = element.key;

  // Owner will be preserved, unless ref is overridden
  let owner = !__DEV__ ? undefined : element._owner;

  if (config != null) {
    if (hasValidRef(config)) {
      owner = __DEV__ ? getOwner() : undefined;

View on GitHub (pinned to eafeac097b)

Solutions

1. Guard with React.isValidElement(children) before cloneElement
2. Use React.Children.map(children, child => cloneElement(child, props)) which safely handles empty/multiple children
3. Fix the caller to always pass one element child when the component requires it

Example fix

// before
function Enhance({children, extra}) {
  return cloneElement(children, {extra}); // throws when children is undefined
}
<Enhance extra={1} />;

// after
function Enhance({children, extra}) {
  if (!isValidElement(children)) return null;
  return cloneElement(children, {extra});
}

// Guard before cloning children
import {isValidElement, cloneElement, Children} from 'react';
function cloneChild(child, props) {
  return isValidElement(child) ? cloneElement(child, props) : null;
}
// or for collections:
const cloned = Children.map(children, child =>
  isValidElement(child) ? cloneElement(child, {extra: true}) : child,
);

const isCloneableElement = (v: unknown): v is React.ReactElement =>
  React.isValidElement(v);

When it happens

Trigger: React.cloneElement(props.children, {prop}) when children is undefined (<Comp />) or explicitly null; cloning a variable assigned from a conditional that produced no element.

Common situations: Wrapper/HOC components that clone this.props.children without checking it exists; children passed through optional props or slot patterns that can be empty.

Related errors

• 60
• 137
• Can only set one of `children` or `props.dangerouslySetInner
• input is a self-closing tag and must neither have `children`
• If you supply `defaultValue` on a <textarea>, do not pass ch

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/dfed92444b26bec0. Report an issue: GitHub.