title: How to assign the correct typing to React.cloneElement when giving properties to children?
body: <p>I am using React and Typescript. I have a react component that acts as a wrapper, and I wish to copy its properties to its children. I am following React's guide to using clone element: <a href="https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement" rel="noreferrer">https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement</a>. But when using using <code>React.cloneElement</code> I get the following error from Typescript:</p>
  
  <pre><code>Argument of type 'ReactChild' is not assignable to parameter of type 'ReactElement&lt;any&gt;'.at line 27 col 39
    Type 'string' is not assignable to type 'ReactElement&lt;any&gt;'.
  </code></pre>
  
  <p><strong>How can I assign the correct typing's to react.cloneElement?</strong></p>
  
  <p>Here is an example that replicates the error above:</p>
  
  <pre><code>import * as React from 'react';
  
  interface AnimationProperties {
      width: number;
      height: number;
  }
  
  /**
   * the svg html element which serves as a wrapper for the entire animation
   */
  export class Animation extends React.Component&lt;AnimationProperties, undefined&gt;{
  
      /**
       * render all children with properties from parent
       *
       * @return {React.ReactNode} react children
       */
      renderChildren(): React.ReactNode {
          return React.Children.map(this.props.children, (child) =&gt; {
              return React.cloneElement(child, { // &lt;-- line that is causing error
                  width: this.props.width,
                  height: this.props.height
              });
          });
      }
  
      /**
       * render method for react component
       */
      render() {
          return React.createElement('svg', {
              width: this.props.width,
              height: this.props.height
          }, this.renderChildren());
      }
  }
  </code></pre>