react.dev/docs/10.5-clone-with-props.md

---
id: clone-with-props
title: Cloning Components
permalink: clone-with-props.html
prev: test-utils.html
next: update.html
---

In rare situations a component may want to change the props of a component that it doesn't own (like changing the `className` of a component passed as `this.props.children`). Other times it may want to make multiple copies of a component passed to it. `cloneWithProps()` makes this possible.

#### `ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)`

Do a shallow copy of `component` and merge any props provided by `extraProps`. The `className` and `style` props will be merged intelligently.

> Note:
>
> `cloneWithProps` does not transfer `key` to the cloned component. If you wish to preserve the key, add it to the `extraProps` object:
>
> ```js
> var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.key });
> ```
>
> `ref` is similarly not preserved.
clone docs 11 years ago			`---`
			`id: clone-with-props`
			`title: Cloning Components`
			`permalink: clone-with-props.html`
			`prev: test-utils.html`
Add update() docs 11 years ago			`next: update.html`
clone docs 11 years ago			`---`

			In rare situations a component may want to change the props of a component that it doesn't own (like changing the `className` of a component passed as `this.props.children`). Other times it may want to make multiple copies of a component passed to it. `cloneWithProps()` makes this possible.

			#### `ReactComponent React.addons.cloneWithProps(ReactComponent component, object? extraProps)`

Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			Do a shallow copy of `component` and merge any props provided by `extraProps`. The `className` and `style` props will be merged intelligently.
Add note about key prop being excluded by cloneWithProps Whilst this is intentional behaviour (see #1274), it is not documented anywhere, so it is worth mentioning. It would also be nice if React issued a warning to console if a cloned component loses its key (as this will silently break reconciliation?) 11 years ago
follow docs convention for notes 11 years ago			`> Note:`
			`>`
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			> `cloneWithProps` does not transfer `key` to the cloned component. If you wish to preserve the key, add it to the `extraProps` object:
Fix markdown parsing error closes #3075 10 years ago			`>`
follow docs convention for notes 11 years ago			> ```js
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			`> var clonedComponent = cloneWithProps(originalComponent, { key : originalComponent.key });`
follow docs convention for notes 11 years ago			> ```
Fix markdown parsing error closes #3075 10 years ago			`>`
Update docs to align with 0.12 better - Rename React.renderComponent -> React.render - Remove most references to transferPropsTo 10 years ago			> `ref` is similarly not preserved.