5 hands-on exercises and 5 find-the-bug challenges for the JSX Rules and Gotchas lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Return a heading and a paragraph from one component.
Return the same two elements without an extra wrapper element.
Add a JSX comment above a paragraph without it appearing on the page.
Keep a space between two spans that JSX would otherwise collapse.
Return multi-line JSX safely by opening a bracket on the return line.
Two adjacent elements need a shared parent.
A developer note was written as a paragraph instead of a comment, so it shows in place of the real content.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceJSX drops whitespace between lines, so the words run together.
A fragment renders the children without adding an element.
Braces after an arrow make a function body, so the JSX is never returned.