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.
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
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>
You can also use this way to auto assign key to your component list
React.Children.toArray(someData.map(data=><div>{data.name}</div>))