javascript - Can I add a key prop to a React fragment?

Question

I am generating a dl in React:

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

            return (
              <>
                <dt key={`dt-${i}`}>{highlight}</dt>
                <dd key={`dd-${i}`}>{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, i) => {
            const count = text.split(highlight).length - 1;

            return (
              <div key={i}>
                <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