React · Junior · Question 61 of 75

How do you add a `key` when each list item renders several elements without a wrapper?

{items.map((item) => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.text}</dd>
  </Fragment>
))}

✓Correct answer: Use <Fragment key={...}> - the short <> syntax can't take a key
2Put the key on the first child only
3Fragments can't be used in lists

Explanation

<></> is shorthand for <Fragment> without attributes. Import Fragment from react when you need a key.

Further reading

Test yourself

Take the React · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.