---
id: 5a24bbe0dba28a8d3cbd4c5d
title: Create a Complex JSX Element
challengeType: 6
isRequired: false
videoUrl: ''
localeTitle: Crie um elemento JSX complexo
---
## Description
O último desafio foi um exemplo simples de JSX, mas o JSX também pode representar HTML mais complexo. Uma coisa importante a saber sobre o JSX aninhado é que ele deve retornar um único elemento. Esse elemento pai único envolveria todos os outros níveis de elementos aninhados. Por exemplo, vários elementos JSX escritos como irmãos sem elemento wrapper pai não serão transpilados. Veja um exemplo: JSX válido: <div>
<p> Parágrafo um </ p>
<p> Parágrafo dois </ p>
<p> Parágrafo 3 </ p>
</ div>
JSX inválido: <p> Parágrafo um </ p>
<p> Parágrafo dois </ p>
<p> Parágrafo 3 </ p>
## Instructions
Defina uma nova constante JSX que renderize uma div que contenha os seguintes elementos em ordem: Uma h1 , uma p e uma lista não ordenada que contém três itens li . Você pode incluir qualquer texto que desejar em cada elemento. Nota: Ao renderizar vários elementos como este, você pode agrupá-los entre parênteses, mas isso não é estritamente necessário. Observe também que esse desafio usa uma tag div para envolver todos os elementos filhos em um único elemento pai. Se você remover o div , o JSX não será mais transpelado. Lembre-se disso, pois isso também será aplicado quando você retornar elementos JSX nos componentes do React.
## Tests
```yml
tests:
- text: A constante JSX deve retornar um elemento div .
testString: 'assert(JSX.type === "div", "The constant JSX should return a div element.");'
- text: O div deve conter uma tag p como o segundo elemento.
testString: 'assert(JSX.props.children[1].type === "p", "The div should contain a p tag as the second element.");'
- text: O div deve conter uma tag ul como o terceiro elemento.
testString: 'assert(JSX.props.children[2].type === "ul", "The div should contain a ul tag as the third element.");'
- text: O div deve conter uma tag h1 como o primeiro elemento.
testString: 'assert(JSX.props.children[0].type === "h1", "The div should contain an h1 tag as the first element.");'
- text: O ul deve conter três 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
```