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

To add a key to a fragment you need to use full Fragment syntax:

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

See docs here https://reactjs.org/docs/fragments.html#keyed-fragments