React Academy · Lesson

Cloning & Injecting Props with cloneElement

Use React.cloneElement to pass hidden props from parent to child components.

Cloning & Injecting Props with cloneElement is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use React.cloneElement to clone a child element and inject extra props from the parent, without the child needing to know about them.

What Is cloneElement?

`React.cloneElement(element, props, ...children)` creates a new React element based on an existing one, merging the new props with the original props. The original element's type is preserved.

const clone = React.cloneElement(child, { active: true });

Why Use cloneElement?

A parent component can inject behaviour (like active state or event handlers) into its children without the children knowing about it. This is used in tab systems, accordions, and form groups.

Tab Bar Example

A Tabs component can clone each Tab child and inject `isActive` and `onClick` props automatically, so the consumer does not need to wire them manually.

function Tabs({ children, activeIndex, onChange }) {
  return (
    <div className="tabs">
      {React.Children.map(children, (child, i) =>
        React.cloneElement(child, {
          isActive: i === activeIndex,
          onClick: () => onChange(i),
        })
      )}
    </div>
  );
}

Props Merging Rules

cloneElement merges the new props **over** the original props. If the original element already has a prop with the same key, the new value wins. style and className are overwritten (not merged) unless you handle it manually.

Merging Event Handlers

To merge event handlers instead of overriding them, manually compose the callbacks before passing to cloneElement.

React.cloneElement(child, {
  onClick: (e) => {
    child.props.onClick?.(e); // original handler
    handleClick(e);           // injected handler
  },
})

Replacing Children

The third argument to `cloneElement` replaces the element's children. Pass new content to override the original children entirely.

// Replace children with wrapped version
React.cloneElement(child, {}, <strong>{child.props.children}</strong>)

Checking Element Type Before Cloning

Before cloning, verify the child is a valid React element and optionally check its type to avoid cloning non-element children (text, numbers, null).

if (React.isValidElement(child)) {
  return React.cloneElement(child, extraProps);
}
return child;

cloneElement vs Context

cloneElement is fragile because it requires knowing the child's structure. Context is generally preferred for passing implicit data through many levels. Use cloneElement only for direct parent-child prop injection.

Modern Alternative: render props and hooks

In many cases where cloneElement was used historically, a custom hook or render prop is cleaner. Consider cloneElement when you truly own both the parent and the direct children.

Quick Check

What happens to a prop that exists on both the original element and the props object passed to React.cloneElement?

Recap

React.cloneElement clones an element and injects new props. Use it for parent-to-child implicit prop injection in compound components. Prefer Context or render props when the hierarchy is deeper.

Course Complete

Congratulations! You completed **React Children API & Slots Pattern**. You now master props.children, React.Children utilities, named slot props, and cloneElement for building flexible layout components.

Frequently asked questions

Is the “Cloning & Injecting Props with cloneElement” lesson free?

Yes — the full text of “Cloning & Injecting Props with cloneElement” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Cloning & Injecting Props with cloneElement”?

Use React.cloneElement to pass hidden props from parent to child components. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Cloning & Injecting Props with cloneElement” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

props.children Fundamentals
React.Children Utilities
Named Slots via Object Props
Cloning & Injecting Props with cloneElement

← Back to React Academy