230

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.

alexwlchan
  • 5,699
  • 7
  • 38
  • 49
sdgfsdh
  • 33,689
  • 26
  • 132
  • 245
  • 31
    ``. Don't use the shortcut syntax. See [keyed fragments](https://reactjs.org/docs/create-fragment.html) – Dupocas Dec 18 '19 at 11:23
  • Just a suggestion, don't use index as key. See here why: [react using index as key for items in the list](https://stackoverflow.com/questions/59517962/react-using-index-as-key-for-items-in-the-list) – Ashish Duklan Nov 19 '20 at 11:22

3 Answers3

458

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

Carl G
  • 17,394
  • 14
  • 91
  • 115
demkovych
  • 7,827
  • 3
  • 19
  • 25
33

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

alexwlchan
  • 5,699
  • 7
  • 38
  • 49
Mukesh Bhati
  • 504
  • 4
  • 5
4

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

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

Maqsood Ahmed
  • 1,853
  • 1
  • 10
  • 18
  • 1
    I don't understand this solution.... what happens to the children on a re-render? How does React know which div corresponds to which array element without a key? – Erik Pukinskis Jul 02 '23 at 15:48