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
.
Advertisement
Answer
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