Fragments: group without adding a wrapper
Neither Fragment adds an element: the <dl> holds only dt/dd pairs, and the root holds the h2 and the dl directly. The long form <Fragment key=…> is needed inside map because the short <> can't take a key.
JSX looks like HTML but is stricter: a component returns one root element (or a Fragment), every tag must be closed, and attributes use JavaScript names such as className, htmlFor and camelCase like onClick and tabIndex.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Convert to JSX: <img src="cat.png" alt="A cat"><label for="pet" class="big">Pet</label>, returned from a component.
Render a list of three products as <dt>/<dd> pairs inside a <dl> with no extra wrapper elements.
Explain it without notes
Why must a component return a single root element?
What is a Fragment, and when would you use <Fragment> instead of <>?
Why do we write className and htmlFor in JSX?
Which tags must be self-closed in JSX, and what happens if you forget?
Preview
Console
Nothing logged yet.Expected console output
Children of <dl>: DT DD DT DD DT DD
Children of #root: H2 DL