title: React: Create a new element from all children while adding props
body: <p>I'm trying to loop over all children and add a prop to it. The problem is it works for all immediate children, but the "grandchildren" if you will, do not also receive the new props. Here is the code snippet:</p>
  
  <pre><code>React.Children.map(this.props.children, child =&gt;
    React.createElement(
       child.type, 
       Object.assign({}, {...child.props}, {newProp: "test"}),
    )
  )
  </code></pre>
  
  <p>All of the immediate children retain their props, as well as gain <code>prop.newProp</code> and the grandchildren are also returned, but without <code>newProp</code>. Passing the children in like so also does not work:</p>
  
  <pre><code>React.Children.map(this.props.children, child =&gt;
    React.createElement(
       child.type, 
       Object.assign({}, {...child.props}, {newProp: "test"}),
       child.props.children
    )
  )
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <ul>
  <li>Plain old ReactJS answers please, without the use of additional libraries such as Redux.</li>
  </ul>