title: Extracting a component from props.children?
body: <p>I was working on a <code>Panel</code> component in ReactJS, and so, idea is to make the basic components available along with the collapse/close functionality. However, I am unable to find any way to extract a component from <code>this.props.children</code>.</p>
  
  <p>So here is my component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Header from './PanelHeader';
  import Body from './PanelBody';
  
  
  class Panel extends React.Component {
     constructor(props) {
        super(props);
        this.state = { open: true };
     }
  
  
     render() {
        return (
          &lt;StyledPanel&gt;
            {this.props.children}   &lt;-- Is there a way to extract the Header component here
          &lt;/StyledPanel&gt;
        );
     }
  }
  
  Object.assign(Panel, 
  {
    Header,
    Body
  });
  
  export default Panel;
  </code></pre>
  
  <p>So, now the user of this component can do something like:</p>
  
  <pre><code>&lt;Panel&gt;
     &lt;Panel.Header&gt;Header text for this panel&lt;/Panel.Header&gt;
     &lt;Panel.Body&gt;Body of this panel&lt;/Panel.Body&gt;
  &lt;/Panel&gt;
  </code></pre>
  
  <p><code>Header</code> component contains a toolbar control for collapse and close functionalities. Now I do understand that the user of this component can specify these event handlers, and implement these features. But I want this out of the box. So, <code>Panel</code> by default, should be able to collapse everything except the header. So is it possible to extract <code>Header</code> component inside the <code>Panel</code> from <code>this.props.children</code>? If yes, then how?</p>
  
  <p>Also, if I did make this work by:</p>
  
  <ol>
  <li>Iterating <code>this.props.children</code> until <code>child.type === Header</code></li>
  <li>Using <code>React.cloneElement</code> to assign new props</li>
  <li>And passing in the new event handlers for these new features.</li>
  </ol>
  
  <p>Am I doing something wrong here? Or is there some elegant way to achieve this?</p>
  
  <p>Thank you.</p>