Variable cloneElementConst

Type Declaration

• • (component: Component, propsPatch?: object, ...children: any[]): Component

  • Creates a new component by cloning an existing component and applying a partial props update.

    The original component is not mutated. Existing props are copied first, then the properties in propsPatch are applied over them. Passing a prop with the value undefined follows the implementation's normal prop-merging behavior.

    If one or more children arguments are provided, they replace the cloned component's existing children. If no children are provided, the original children are preserved.

    Parameters

    • component: Component

      The element to clone.

    • OptionalpropsPatch: object

      Props to apply to the cloned element. Existing props are preserved unless they are overridden by a property in this object.

    • ...children: any[]

      Optional replacement children. Multiple children are supported and are passed to the cloned element in the same order.

    Returns Component

    A new element with the patched props and, when provided, replacement children.

    Example

    const button = (
      <Button variant="secondary" disabled={false}>
        Save
      </Button>
    );
    
    const clonedButton = cloneComponent(
      button,
      { disabled: true, 'aria-label': 'Save changes' },
      'Save changes'
    );
    Copy

    Example

    const panel = <Panel className="compact">Old content</Panel>;
    
    // Existing children are replaced when children are provided.
    const updatedPanel = cloneComponent(
      panel,
      { className: 'expanded' },
      <Heading>New content</Heading>
    );
    Copy