Transfer the key prop in cloneWithProps
`cloneWithProps` uses `ReactPropTransferer`, which ignores the `key` prop. See https://github.com/facebook/react/pull/713 However, this is not the case with `cloneWithProps` because when someone is cloning a component and provides a key, they mean for the clone to take it.
Paul Shen committed
Jan 23, 2014 at 13:17 UTC
4a5a6ad733a546f933c8096932fb87b47bc335da
2 files changed
+19
-3
src/utils/__tests__/cloneWithProps-test.js
+13
@@ -113,4 +113,17 @@ describe('cloneWithProps', function() {
113
console.warn = _warn;
114
}
115
});
116
+
117
+ it('should transfer the key property', function() {
118
+ var Component = React.createClass({
119
+ render: function() {
120
+ expect(this.props.key).toBe('xyz');
121
+ return <div />;
122
+ }
123
+ });
124
+
125
+ ReactTestUtils.renderIntoDocument(
126
+ cloneWithProps(<Component />, {key: 'xyz'})
127
+ );
128
+ });
129
});
src/utils/cloneWithProps.js
+6
-3
@@ -41,9 +41,12 @@ function cloneWithProps(child, props) {
41
}
42
}
43
44
- return child.constructor.ConvenienceConstructor(
45
- ReactPropTransferer.mergeProps(child.props, props)
46
- );
44
+ var newProps = ReactPropTransferer.mergeProps(child.props, props);
45
+ // ReactPropTransferer does not transfer the `key` prop so do it manually.
46
+ if (props.key) {
47
+ newProps.key = props.key;
48
+ }
49
+ return child.constructor.ConvenienceConstructor(newProps);
50
}
51
52
module.exports = cloneWithProps;