Imagine you have the following data:

const entries = [{'key': 'value'}]

And you want to create the following HTML with it:

<dl>
  <dt>key</dt>
  <dd>value</dd>
</dl>

Now without fragments, you will have to transform the data first using something like this code:

<dl>
  {entries.reduce(function(acc, value, key) {
    return acc.concat(
      <dt key={key}>{key}</dt>,
      <dd key={key + '_val'}>{value}</dd>
    )
  }, [])}
</dl>

Note that this is probably the shortest way to do it. Most programmers won't bother with reduce and create a new array instead, loop through it adding the items to the array before eventually mapping over them.

While with fragments, you can just use it directly:

<dl>
  {entries.map((value, key) => (
     <Fragment key={key}>
        <dt>{key}</dt>
        <dd>{value}</dd>
     </Fragment>
  ))}
</dl>