Embedded Files
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>.
Instructions
Instructions
1.Your friend’s blog is down! He’s asked you to fix it.
You immediately diagnose the problem: a JSX expression with multiple outer elements.
Repair your friend’s broken code by wrapping their JSX in a <div></div>.
blog.js
blog.js
const blog = (
<img src="pics/192940u73.jpg" />
<h1>
Welcome to Dan's Blog!
</h1>
<article>
Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
</article>
);
Page updated
Report abuse