Lesson 27 of 30
90%
Fragments
A component must return one tree. Fragments let you group children without an extra DOM node.
Short syntax
javascript
The page gets h1 and h2 only. No wrapping div.
Long syntax when you need a key
In a map, fragments can take a key. The short <> cannot.
javascript
Why skip the extra div
Flex and grid care about direct children. A stray wrapper can break a layout.
Tables cannot wrap a td in a div. A fragment is legal.
Tip: If you do not need a className on the wrapper, try a fragment first.
Test yourself
Three quick questions made just for this lesson. Earn 10 XP per correct answer.