Can I add a key prop to a React fragment?

Question

I am generating a dl in React:

<dl>
  {
    highlights.map(highlight => {
      const count = text.split(highlight).length - 1;

      return (
        <>
          <dt key={`dt-${highlight.id}`}>{highlight}</dt>
          <dd key={`dd-${highlight.id}`}>{count}</dd>
        </>
      );
    })
  }
</dl>

This gives me the warning:

Warning: Each child in a list should have a unique "key" prop.

This will remove the warning, but doesn't generate the HTML I want:

<dl>
  {
    highlights.map(highlight => {
      const count = text.split(highlight).length - 1;

      return (
        <div key={highlight.id}>
          <dt>{highlight}</dt>
          <dd>{count}</dd>
        </div>
      );
    })
  }
</dl>

And I cannot add a key prop to a fragment (<> </>).

How can work around this?

---

I am using React 16.12.0.

Answer 1

Yes, you can add a key in the below form Fragment which is not possible in the shorter version of Fragments(i.e, <></>)

<Fragment key={your key}></Fragment>

For Reference

Answer 2

You can also use this way to auto assign key to your component list

React.Children.toArray(someData.map(data=><div>{data.name}</div>))