Cloning ReactElements

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:

  1. var cloneWithProps = require('react-addons-clone-with-props');
  3. var _makeBlue = function(element) {
  4.   return cloneWithProps(element, {style: {color: 'blue'}});
  5. };
  7. var Blue = React.createClass({
  8.   render: function() {
  9.     var blueChildren = React.Children.map(this.props.children, _makeBlue);
  10.     return <div>{blueChildren}</div>;
  11.   }
  12. });
  14. ReactDOM.render(
  15.   <Blue>
  16.     <p>This text is blue.</p>
  17.   </Blue>,
  18.   document.getElementById('container')
  19. );

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