• Cloning ReactElements

    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.