3.2 KiB
3.2 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24bbe0dba28a8d3cbd4c5d | Create a Complex JSX Element | 6 | false |
Description
<div>Invalid JSX:
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
</div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
Instructions
JSX
that renders a div
which contains the following elements in order:
An h1
, a p
, and an unordered list that contains three li
items. You can include any text you want within each element.
Note: When rendering multiple elements like this, you can wrap them all in parentheses, but it's not strictly required. Also notice this challenge uses a div
tag to wrap all the child elements within a single parent element. If you remove the div
, the JSX will no longer transpile. Keep this in mind, since it will also apply when you return JSX elements in React components.
Tests
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
testString: assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');
- text: The <code>div</code> should contain a <code>ul</code> tag as the third element.
testString: assert(JSX.props.children[2].type === 'ul', 'The <code>div</code> should contain a <code>ul</code> tag as the third element.');
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
testString: assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');
- text: The <code>ul</code> should contain three <code>li</code> elements.
testString: assert(JSX.props.children[2].props.children.length === 3, 'The <code>ul</code> should contain three <code>li</code> elements.');
Challenge Seed
// write your code here
After Test
ReactDOM.render(JSX, document.getElementById('root'))
Solution
const JSX = (
<div>
<h1>Hello JSX!</h1>
<p>Some info</p>
<ul>
<li>An item</li>
<li>Another item</li>
<li>A third item</li>
</ul>
</div>);