Using React.Children.only

Author: Matt Zabriskie

lib/draggable.js

@@ -246,13 +246,6 @@ module.exports = React.createClass({
 		};
 	},
 
-	componentWillMount: function () {
-		invariant(
-			React.Children.count(this.props.children) === 1,
-			'There should only be a single child element within Draggable.'
-		);
-	},
-
 	handleMouseDown: function (e) {
 		var node = this.getDOMNode();
 
@@ -324,18 +317,11 @@ module.exports = React.createClass({
 
 		// Reuse the child provided
 		// This makes it flexible to use whatever element is wanted (div, ul, etc)
-		var child = null;
-		React.Children.forEach(this.props.children, function (c) {
-			if (child === null) {
-				child = React.addons.cloneWithProps(c, {
-					style: style,
-					className: 'react-draggable',
-					onMouseUp: this.handleMouseUp,
-					onMouseDown: this.handleMouseDown
-				});
-			}
-		}, this);
-
-		return child;
+		return React.addons.cloneWithProps(React.Children.only(this.props.children), {
+			style: style,
+			className: 'react-draggable',
+			onMouseUp: this.handleMouseUp,
+			onMouseDown: this.handleMouseDown
+		});
 	}
 });