Files
react.dev/docs/10.5-clone-with-props.md
mheiber b801d5856c Update cloneWithProps documentation
Updated documentation to reflect that using React.cloneElement is the new way to copy an element and preserve `key` and `ref`.

Fixes #3432, closes #3447.
2015-04-22 17:05:59 -07:00

1.0 KiB

id, title, permalink, prev, next
id title permalink prev next
clone-with-props Cloning ReactElements clone-with-props.html test-utils.html create-fragment.html

Note: cloneWithProps is deprecated. Use React.cloneElement instead.

In rare situations, you may want to create a copy of a React element with different props from those of the original element. One example is cloning the elements passed into this.props.children and rendering them with different props:

var _makeBlue = function(element) {
  return React.addons.cloneWithProps(element, {style: {color: 'blue'}});
};

var Blue = React.createClass({
  render: function() {
    var blueChildren = React.Children.map(this.props.children, _makeBlue);
    return <div>{blueChildren}</div>;
  }
});

React.render(
  <Blue>
    <p>This text is blue.</p>
  </Blue>,
  document.getElementById('container')
);

cloneWithProps does not transfer key or ref to the cloned element. className and style props are automatically merged.