title: React clone component (stateless or stateful) to pass additional props
body: <p>I want to clone/extend a React component (without knowing if it is statefull or stateless) and pass it props:</p>
  
  <pre><code>const Foo = (props) =&gt; {
      return (
      &lt;div&gt;foo&lt;/div&gt;
    );
  }
  
  class Bar extends React.Component {
      render() {
      return (
          &lt;div&gt;bar&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>The problem is, these two variables <code>Foo</code> and <code>Bar</code> should be handled differently:</p>
  
  <pre><code>const FooExtended = (props, context) =&gt; {
      return Foo(_.extend(props, additionalProps), context);
  }
  
  class BarExtended extends Bar {
      constructor(props, context) {
          super(_.extend(props, additionalProps), context);
      }
  }
  </code></pre>
  
  <p>And there is no simple way to know if a variable <code>Component</code> is Stateless or Statefull without doing hacky <code>toString</code> regex tests. </p>
  
  <p><code>React.cloneElement/createElement</code> fails on these giving me the following error:</p>
  
  <blockquote>
    <p>React.createElement: type is invalid -- expected a string (for
    built-in components) or a class/function (for composite components)
    but got: object. You likely forgot to export your component from the
    file it's defined in.</p>
  </blockquote>
  
  <p>So is there a simple way that I can do just <code>cloneComponent(originalComponent, additionalProps)</code>?</p>