diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js
index d3316619f6..352c4e5ae7 100644
--- a/src/addons/transitions/ReactTransitionGroup.js
+++ b/src/addons/transitions/ReactTransitionGroup.js
@@ -15,7 +15,6 @@ var React = require('React');
var ReactTransitionChildMapping = require('ReactTransitionChildMapping');
var assign = require('Object.assign');
-var cloneWithProps = require('cloneWithProps');
var emptyFunction = require('emptyFunction');
var ReactTransitionGroup = React.createClass({
@@ -213,7 +212,7 @@ var ReactTransitionGroup = React.createClass({
// already been removed. In case you need this behavior you can provide
// a childFactory function to wrap every child, even the ones that are
// leaving.
- childrenToRender.push(cloneWithProps(
+ childrenToRender.push(React.cloneElement(
this.props.childFactory(child),
{ref: key, key: key}
));
diff --git a/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js b/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js
index d12783bfea..5343fd49e8 100644
--- a/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js
+++ b/src/isomorphic/deprecated/__tests__/cloneWithProps-test.js
@@ -30,6 +30,26 @@ describe('cloneWithProps', function() {
onlyChild = require('onlyChild');
cloneWithProps = require('cloneWithProps');
emptyObject = require('emptyObject');
+ spyOn(console, 'error');
+ });
+
+ it('should warn once because it is deprecated', function() {
+ var Parent = React.createClass({
+ render: function() {
+ return (
+
+ {cloneWithProps(onlyChild(this.props.children), {})}
+
+ );
+ },
+ });
+ ReactTestUtils.renderIntoDocument();
+ ReactTestUtils.renderIntoDocument();
+ expect(console.error.argsForCall.length).toBe(1);
+ expect(console.error.argsForCall[0][0]).toContain(
+ 'cloneWithProps(...) is deprecated. ' +
+ 'Please use React.cloneElement instead.'
+ );
});
it('should clone a DOM component with new props', function() {
@@ -80,8 +100,6 @@ describe('cloneWithProps', function() {
});
it('should warn when cloning with refs', function() {
- spyOn(console, 'error');
-
var Grandparent = React.createClass({
render: function() {
return ;
@@ -99,7 +117,7 @@ describe('cloneWithProps', function() {
var component = ReactTestUtils.renderIntoDocument();
expect(component.refs).toBe(emptyObject);
- expect(console.error.argsForCall.length).toBe(1);
+ expect(console.error.argsForCall.length).toBe(2);
});
it('should transfer the key property', function() {
diff --git a/src/isomorphic/deprecated/cloneWithProps.js b/src/isomorphic/deprecated/cloneWithProps.js
index 3a5291e4da..589747c6ce 100644
--- a/src/isomorphic/deprecated/cloneWithProps.js
+++ b/src/isomorphic/deprecated/cloneWithProps.js
@@ -20,6 +20,8 @@ var warning = require('warning');
var CHILDREN_PROP = keyOf({children: null});
+var didDeprecatedWarn = false;
+
/**
* Sometimes you want to change the props of a child passed to you. Usually
* this is to add a CSS class.
@@ -28,9 +30,16 @@ var CHILDREN_PROP = keyOf({children: null});
* @param {object} props props you'd like to modify. className and style will be
* merged automatically.
* @return {ReactElement} a clone of child with props merged in.
+ * @deprecated
*/
function cloneWithProps(child, props) {
if (__DEV__) {
+ warning(
+ didDeprecatedWarn,
+ 'cloneWithProps(...) is deprecated. ' +
+ 'Please use React.cloneElement instead.'
+ );
+ didDeprecatedWarn = true;
warning(
!child.ref,
'You are calling cloneWithProps() on a child with a ref. This is ' +