title: Can I add a key prop to a React fragment?
body: <p>I am generating a <code>dl</code> in React:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;dl&gt;
    {
      highlights.map(highlight =&gt; {
        const count = text.split(highlight).length - 1;
  
        return (
          &lt;&gt;
            &lt;dt key={`dt-${highlight.id}`}&gt;{highlight}&lt;/dt&gt;
            &lt;dd key={`dd-${highlight.id}`}&gt;{count}&lt;/dd&gt;
          &lt;/&gt;
        );
      })
    }
  &lt;/dl&gt;
  </code></pre>
  <p>This gives me the warning:</p>
  <blockquote>
  <p>Warning: Each child in a list should have a unique &quot;key&quot; prop.</p>
  </blockquote>
  <p>This will remove the warning, but doesn't generate the HTML I want:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;dl&gt;
    {
      highlights.map(highlight =&gt; {
        const count = text.split(highlight).length - 1;
  
        return (
          &lt;div key={highlight.id}&gt;
            &lt;dt&gt;{highlight}&lt;/dt&gt;
            &lt;dd&gt;{count}&lt;/dd&gt;
          &lt;/div&gt;
        );
      })
    }
  &lt;/dl&gt;
  </code></pre>
  <p>And I cannot add a <code>key</code> prop to a fragment (<code>&lt;&gt;   &lt;/&gt;</code>).</p>
  <p>How can work around this?</p>
  <hr />
  <p>I am using React <code>16.12.0</code>.</p>