Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Intro to JSX

JSX Outer Elements

There's a rule that we haven't mentioned: a JSX expression must have exactly one outermost element.

In other words, this code will work:

const paragraphs = ( <div id="i-am-the-outermost-element"> <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> </div> );

But this code will not work:

const paragraphs = ( <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> );

The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!

It's easy to forget about this rule, and end up with errors that are tough to diagnose.

If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a <div></div>.

Report a Bug
If you see a bug or any other issue with this page, please report it here.