returning paired elements in React JSX : <p>The Problem:</p>

<p>In React, you want to create a DOM structure by mapping an array, but each item in the array should return 2 elements. e.g.</p>

<pre><code>import React from 'react'
import _ from 'lodash'

let { Component } = React

export default class DataList extends Component {
  render () {
    let array = [
      {def: 'item1', term: 'term1', obj1: 'rand'}, 
      {def: 'item2', term: 'term2'}
    ]
    return (
      &lt;dl&gt;
        {_.map(array, (item) =&gt; {
          return (
            &lt;dt&gt;{item.def}&lt;/dt&gt;
            &lt;dd&gt;{item.term}&lt;/dd&gt;
          )
        })}
      &lt;/dl&gt;
    )
  }
}
</code></pre>

<p>React doesn't let you render siblings without wrapping them in a container element, which would break the DOM structure here.</p>
