3.3 KiB
3.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5d | Create a Complex JSX Element | 6 | false | Crear un elemento JSX complejo |
Description
<div>JSX no válido:
<p> Párrafo uno </p>
<p> Párrafo Dos </p>
<p> Párrafo Tres </p>
</div>
<p> Párrafo uno </p>
<p> Párrafo Dos </p>
<p> Párrafo Tres </p>
Instructions
JSX
que muestre un div
que contenga los siguientes elementos en orden: un h1
, una p
, y una lista desordenada que contenga tres elementos li
. Puede incluir cualquier texto que desee dentro de cada elemento. Nota: Al representar varios elementos como este, puede envolverlos todos entre paréntesis, pero no es estrictamente necesario. También tenga en cuenta que este desafío utiliza una etiqueta div
para envolver todos los elementos secundarios dentro de un único elemento principal. Si elimina el div
, el JSX ya no se transpilará. Tenga esto en cuenta, ya que también se aplicará cuando devuelva elementos JSX en los componentes React. Tests
tests:
- text: La constante <code>JSX</code> debe devolver un elemento <code>div</code> .
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: El <code>div</code> debe contener una etiqueta <code>ul</code> como el tercer elemento.
testString: 'assert(JSX.props.children[2].type === "ul", "The <code>div</code> should contain a <code>ul</code> tag as the third element.");'
- text: El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: La <code>ul</code> debe contener tres elementos <code>li</code> .
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
console.info('after the test');
Solution
// solution required