---
id: 5a24bbe0dba28a8d3cbd4c5d
title: Create a Complex JSX Element
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: Crear un elemento JSX complejo
---
## Description
El último desafío fue un ejemplo simple de JSX, pero JSX también puede representar HTML más complejo. Una cosa importante que se debe saber sobre JSX anidado es que debe devolver un solo elemento. Este elemento primario envolvería todos los otros niveles de elementos anidados. Por ejemplo, varios elementos JSX escritos como hermanos sin elemento de envoltorio principal no se transpilarán. Aquí hay un ejemplo: Valid JSX: <div>
<p> Párrafo uno </p>
<p> Párrafo Dos </p>
<p> Párrafo Tres </p>
</div>
JSX no válido: <p> Párrafo uno </p>
<p> Párrafo Dos </p>
<p> Párrafo Tres </p>
## Instructions
Defina una nueva constante 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
```yml
tests:
- text: La constante JSX debe devolver un elemento div .
testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");'
- text: El div debe contener una etiqueta p como el segundo elemento.
testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");'
- text: El div debe contener una etiqueta ul como el tercer elemento.
testString: 'assert(JSX.props.children[2].type === "ul", "The div should contain a ul tag as the third element.");'
- text: El div debe contener una etiqueta h1 como el primer elemento.
testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");'
- text: La ul debe contener tres elementos li .
testString: 'assert(JSX.props.children[2].props.children.length === 3, "The ul should contain three li elements.");'
```
## Challenge Seed
```jsx
// write your code here
```
### After Test
```js
console.info('after the test');
```
## Solution
```js
// solution required
```