title: React cloneElement and component instance
body: <p>I have the following higher order component that I am trying to wrap in a container element that is supplied as a prop:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  
  export default (Component) =&gt; {
    return class extends React.Component {
      static propTypes = {
        containerElement: PropTypes.element
      }
  
      static defaultProps = {
        containerElement: &lt;div /&gt;
      };
  
      componentDidMount() {
        console.log(this.el);
      }
  
      render() {
        const containerProps = {
          ref: (el) =&gt; this.el = el
        };
  
        return React.cloneElement(containerElement, containerProps, Component);
      };
    }
  }
  </code></pre>
  
  <p>I then wrap a component like this:</p>
  
  <pre><code>export default AnimationComponent(reduxForm({
    form: 'newResultForm',
    validate
  })(NewResultForm));
  </code></pre>
  
  <p>But when I log the element in <code>componentDidMount</code> it is an empty <code>&lt;div/&gt;</code>.</p>
  
  <p>Why is the passed in component not a child of the newly created container element?</p>