React component with two sets of children
<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>