When should I be using React.cloneElement vs this.props.children?
<p>I am still a noob at React and in many examples on the internet, I see this variation in rendering child elements which I find confusing. Normally I see this:</p>

<pre><code>class Users extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Users&lt;/h2&gt;
        {this.props.children}
      &lt;/div&gt;
    )
  }
}
</code></pre>

<p>But then I see an example like this:</p>

<pre><code>&lt;ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     &gt;
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
&lt;/ReactCSSTransitionGroup&gt;
</code></pre>

<p>Now I understand the api but the <a href="https://reactjs.org/docs/react-api.html#cloneelement" rel="noreferrer">docs</a> don't exactly make clear when I should be using it. </p>

<p>So what does one do which the other can't? Could someone explain this to me with better examples?</p>