From 653cb29fbf38d548bb81067ef1e9a09347948bef Mon Sep 17 00:00:00 2001
From: Josh Perez <josh@goatslacker.com>
Date: Thu, 16 Apr 2015 21:54:39 -0700
Subject: [PATCH] Add component prop to AltContainer

---
 components/mixinContainer.js          |  6 ++++--
 docs/components/altContainer.md       | 10 ++++++++++
 test/store-listener-component-test.js | 19 +++++++++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/components/mixinContainer.js b/components/mixinContainer.js
index 341e363f..3f32ecaa 100644
--- a/components/mixinContainer.js
+++ b/components/mixinContainer.js
@@ -135,13 +135,15 @@ function mixinContainer(React) {
     },
 
     altRender: function (cloneWithProps) {
-      var children = this.props.children
-
       // Custom rendering function
       if (typeof this.props.render === 'function') {
         return this.props.render(this.getProps())
+      } else if (this.props.component) {
+        return React.createElement(this.props.component, this.getProps())
       }
 
+      var children = this.props.children
+
       // Does not wrap child in a div if we don't have to.
       if (Array.isArray(children)) {
         return React.createElement('div', null, children.map(function (child, i) {
diff --git a/docs/components/altContainer.md b/docs/components/altContainer.md
index 96075cb3..7d5897ce 100644
--- a/docs/components/altContainer.md
+++ b/docs/components/altContainer.md
@@ -258,3 +258,13 @@ This is a function that gets called with the props that your children will recei
 ```
 
 In this example, Header, Body, and Footer will not re-render because we're returning false.
+
+## `component`
+
+With this prop you can define which component you want to render within your AltContainer. If you have a single component and you're using required propTypes then this is a legitimate way of rendering the components without getting a warning about invalid propTypes from React due to cloneWithProps.
+
+```js
+<AltContainer component={Body} />
+```
+
+This example renders Body inside of the AltContainer.
diff --git a/test/store-listener-component-test.js b/test/store-listener-component-test.js
index 00d6d47d..6748a059 100644
--- a/test/store-listener-component-test.js
+++ b/test/store-listener-component-test.js
@@ -483,5 +483,24 @@ export default {
 
       assert(span.props.foo.x === 888, 'when passing stores as Array they are just listened on')
     },
+
+    'passing in a component as a prop'() {
+      const App = React.createClass({
+        render() {
+          return <strong x={this.props.x} />
+        }
+      })
+
+      const node = TestUtils.renderIntoDocument(
+        <AltContainer store={TestStore} component={App} />
+      )
+
+      const strong = TestUtils.findRenderedDOMComponentWithTag(node, 'strong')
+
+      action.sup(1337)
+
+      assert.isDefined(strong, 'component exists')
+      assert(strong.props.x === 1337, 'and we have props from TestStore')
+    },
   }
 }