title: React component with two sets of children
body: <p>I'm creating a component that needs to take in two sets of children and to be placed in two different parts of a component.</p>
  
  <pre><code>let CreditCardForm = ({icons, fields}) =&gt; (
    &lt;div&gt;
      &lt;div className='some'&gt;
        &lt;div className='special'&gt;
          &lt;div className='nesting'&gt;
            {icons}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      {fields}
    &lt;/div&gt;
  )
  
  let CreditCardFormUsage = () =&gt; {
    let icons = () =&gt; (
      &lt;Icons&gt;
        &lt;IconBogus/&gt;
        &lt;IconVisa/&gt;
        &lt;IconPaypal/&gt;
        &lt;IconMore/&gt;
      &lt;/Icons&gt;
    )
  
    let fields = () =&gt; (
      &lt;CreditCardFields&gt;
        &lt;FieldCardNumber/&gt;
        &lt;FieldName/&gt;
        &lt;FieldExpirey/&gt;
        &lt;FieldCCV/&gt;
      &lt;/CreditCardFields&gt;
    )
    return (
      &lt;CreditCardForm icons={icons} fields={fields}/&gt;
    )
  }
  </code></pre>
  
  <p>The code above should work, my question is it possible to grab those property values based on the children in the element itself, and have something more natural?</p>
  
  <pre><code>&lt;CreditCardForm&gt;
    &lt;Icons&gt;
      &lt;IconBogus/&gt;
      &lt;IconVisa/&gt;
      &lt;IconPaypal/&gt;
      &lt;IconMore/&gt;
    &lt;/Icons&gt;
    &lt;CreditCardFields&gt;
      &lt;FieldCardNumber/&gt;
      &lt;FieldName/&gt;
      &lt;FieldExpirey/&gt;
      &lt;FieldCCV/&gt;
    &lt;/CreditCardFields&gt;
  &lt;/CreditCardForm&gt;
  </code></pre>