freeCodeCamp/curriculum/challenges/portuguese/03-front-end-development-libraries/react/create-a-complex-jsx-element.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5d	Criar um elemento JSX complexo	6	301382	create-a-complex-jsx-element

--description--

O último desafio foi um exemplo simples de JSX, mas JSX também pode representar HTML mais complexo.

Uma coisa importante a saber sobre JSX aninhado é que ele deve retornar um único elemento.

Este único elemento pai envolveria todos os outros níveis de elementos aninhados.

Por exemplo, vários elementos JSX escritos como irmãos sem elemento encapsulador pai não vão transpilar.

Exemplo:

JSX válido:

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>

JSX inválido:

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

--instructions--

Defina uma nova constante JSX que renderiza uma div a qual contém os elementos a seguir em ordem:

Um h1, um p, e uma lista não ordenada que contém três itens li. Você pode incluir qualquer texto que você quiser dentro de cada elemento.

Observação: ao renderizar vários elementos como este, você pode envolver todos entre parênteses, mas não é estritamente necessário. Note também que este desafio usa uma tag div para encapsular todos os elementos filhos dentro de um único elemento pai. Se você remover a div, o JSX não será mais transpilável. Tenha isso em mente, uma vez que ele também será aplicado quando você retornar elementos JSX em componentes React.

--hints--

A constante JSX deve retornar um elemento div.

assert(JSX.type === 'div');

O div deve conter uma tag h1 como o primeiro elemento.

assert(JSX.props.children[0].type === 'h1');

A div deve conter uma tag p como o segundo elemento.

assert(JSX.props.children[1].type === 'p');

O div deve conter uma tag ul como o terceiro elemento.

assert(JSX.props.children[2].type === 'ul');

O ul deve conter três elementos li.

assert(
  JSX.props.children
    .filter((ele) => ele.type === 'ul')[0]
    .props.children.filter((ele) => ele.type === 'li').length === 3
);

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

--solutions--

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>);