Create a Complex JSX Element

JavaScript
#1

Tell us what’s happening:

Your code so far


// write your code here

const JSX = <div>{
<h1>
<p>
<ul>
<li>Paragraph One</li>
<li>Paragraph Two</li>
<li>Paragraph Three</li>
</ul>
</p>
</h1>
}
</div>;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/create-a-complex-jsx-element

#2

Why are you using { }?

Also, why are you nesting your ul element inside the paragraph element which is also nested in the h1 element?

You need to rewrite your html, so that the h1, paragraphs, and ul elements are not nested inside each other. Also, give the h1 and paragraph elements text (per the instructions).

#3

I’m not sure how they are asking me to nest the elements?Are they all supposed to be inline?

#4

I did this and it worked!

// write your code here

const JSX=
<div>
<h1>foo</h1>
<p>bar</p>
<ul><li>foo</li><li>bar</li><li>foo</li></ul>
</div>
1 Like
#5

Congratulations on figuring it out!

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Thank you.

#6

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

#7