`cloneElement`

Creates a new element from an existing one with merged props.

Since React 0.13 Spec ↗

Syntax

cloneElement(element, props, ...children)

Parameters

Name	Type	Required	Description
`element`	`element`	Yes	The element to clone.
`props`	`object`	No	Props to merge over the original element's props.
`children`	`node`	No	Replacement children; original children are kept if omitted.

Returns

element — A new element with shallow-merged props.

Examples

import { cloneElement } from 'react';

function Highlight({ children }) {
  return cloneElement(children, {
    className: 'highlight',
  });
}

Notes

cloneElement shallow-merges new props over existing ones; the original element is unchanged. It is considered a legacy pattern that obscures data flow. Prefer passing data through props, context, or render props instead.