title: How to safely inject props into React children?
body: <p>I am building a React component which delays the unmounting of its children in order to animate them. When unmounting, I would like to pass in an additional prop (for example, a data-attribute or a class name) in order to handle animations.</p>
  <p>This is a specific instance of a general situation where I want override certain properties of children. I have come to realize that the following pattern does exactly what I want:</p>
  <pre><code>this.props.children.map(child =&gt; 
      &lt;child.type key={child.key} 
                  ref={child.ref}
                 {...child.props} 
                 // add my props into children here
                 data-leaving={true} /&gt;)
  </code></pre>
  <p>Instead of returning the child element, I return a new element of the same type and with the same props. I can then add or remove any props I want!</p>
  <p>However, this is undocumented and feels very hacky. I would like to know if this is safe to use in every case.</p>
  <p>Note that I am aware of alternatives (for example, accepting a function which returns the children instead of children directly) but this gives the most convenient interface by far.</p>