How can I extract a reaction fragment in its own component?

Question

I am trying to implement a list of descriptions in React, as shown below. The requirement I'm trying to add is to allow it to be recursive. An example of how you will use it below.

<DescriptionList>
    <DescriptionListItem key="1" term="First Name" description="Ryan" />
    <DescriptionListItem key="2" term="Last Name" description="Me" />
    <DescriptionListItem key="3" term="Email" description="[e-mail]" />
    <DescriptionList>
      <DescriptionListItem key="1" term="term1" description="value 1" />
      <DescriptionListItem key="2" term="term2" description="value 2" />
      <DescriptionListItem key="3" term="term3" description="value 3" />
    </DescriptionList>
</DescriptionList>

I wanted to use something like an html definition list

import React, { Component, PropTypes } from 'react';
import createFragment from 'react-addons-create-fragment';

class DescriptionList extends Component {
  render() {
    console.log(this.props.children);
    return (
      <dl className="row">
        {this.props.children.map(child => createDescriptionListItemFragment(child))}
      </dl>
    );
  }
}

function createDescriptionListItemFragment({props}) {
  let fragment = {};
  fragment.term = <dt>{props.term}</dt>;
  fragment.description = <dd>{props.description}</dd>;
  fragment = createFragment(fragment);
  return fragment;
}

DescriptionList.propTypes = {
  children: PropTypes.array.isRequired
};

export default DescriptionList;

Above was the implementation of the first round. I was hoping to extract DescriptionListIteminto my own component and process the logic DescriptionListItemthere. I managed to get everything working in one component, as it createFragmentreturns an array of ReactElements. It seems you cannot return the fragment as a reactive component. I cannot wrap the fragment in div, as it must sit inside dl.

Any ideas how I can extract the logic into my own component?