CodePark/ questions / Fundamentals & JSX
START PRACTICINGPRACTICE
Frontend question · React › Fundamentals & JSX

Each glossary entry must render as two siblings, <dt> and <dd>, inside a <dl>. Which wrapper is correct inside the map?

<dl>
  {items.map(item => (
    /* wrapper here */
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    /* end wrapper */
  ))}
</dl>
<Fragment key={item.id}> … </Fragment>

<Fragment key={item.id}> is correct. Each item in a list needs a key, and you need a wrapper to return two elements. The explicit <Fragment>, imported from react, can take a key. It also adds no extra DOM node.

The short <> option is the tempting wrong answer. The short syntax cannot take any attributes, including key. "No wrapper" is wrong because an arrow function cannot return two adjacent JSX elements. The <div> option is wrong because its reason is false: fragments work fine inside map. A div also adds an extra DOM node that a fragment avoids.