---
id: 5a24c314108439a4d4036167
title: Renderizar um Componente de Classe para o DOM
challengeType: 6
forumTopicId: 301404
dashedName: render-a-class-component-to-the-dom
---
# --description--
Você talvez se lembre de usar a API do ReactDOM em um desafio anterior para renderizar elementos JSX para o DOM. O processo para renderizar componentes React ficará muito parecido. Os últimos desafios focaram em componentes e composição, então a renderização foi feita pra você nos bastidores. No entanto, nenhum código React que você escreva irá renderizar no DOM sem fazer uma chamada para a API do ReactDOM.
Aqui está uma atualização na sintaxe: `ReactDOM.render(componentToRender, targetNode)`. O primeiro argumento é o componente React que você deseja renderizar. O segundo argumento é o nó DOM onde você quer renderizar esse componente dentro.
Componentes React são passados a `ReactDOM.render()` um pouco diferente dos elementos JSX. Para elementos JSX, você passa o nome do elemento que deseja renderizar. No entanto, para componentes React, você precisa usar a mesma sintaxe como se estivesse renderizando um componente aninhado, por exemplo `ReactDOM. ender(, targetNode)`. Você usa esta sintaxe para componentes de classe ES6 e componentes funcionais.
# --instructions--
Tanto os componentes `Fruits` e `Vegetables` são definidos para você nos bastidores. Renderize ambos os componentes como filhos do componente `TypesOfFood` e, em seguida, renderizar `TypesOfFood` para o DOM. Há um `div` com `id='challenge-node'` disponível para você usar.
# --hints--
O componente `TypesOfFood` deve retornar um único elemento `div`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().type() === 'div';
})()
);
```
O componente `TypesOfFood` deve renderizar o componente `Fruits` após o elemento `h1`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().childAt(1).name() === 'Fruits';
})()
);
```
O componente `TypesOfFood` deve renderizar o componente `Vegetables` depois de `Fruits`.
```js
assert(
(function () {
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
return mockedComponent.children().childAt(2).name() === 'Vegetables';
})()
);
```
O componente `TypesOfFood` deve ser renderizado no DOM dentro do `div` com o id `challenge-node`.
```js
assert(
(function () {
const html = document.getElementById('challenge-node').childNodes[0]
.innerHTML;
return (
html.includes(
'
Fruits:
Non-Citrus:
- Apples
- Blueberries
- Strawberries
- Bananas
Citrus:
- Lemon
- Lime
- Orange
- Grapefruit
'
) &&
html.includes(
'Vegetables:
- Brussel Sprouts
- Broccoli
- Squash
'
)
);
})()
);
```
# --seed--
## --before-user-code--
```jsx
const Fruits = () => {
return (
Fruits:
Non-Citrus:
- Apples
- Blueberries
- Strawberries
- Bananas
Citrus:
- Lemon
- Lime
- Orange
- Grapefruit
);
};
const Vegetables = () => {
return (
Vegetables:
- Brussel Sprouts
- Broccoli
- Squash
);
};
```
## --seed-contents--
```jsx
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Types of Food:
{/* Change code below this line */}
{/* Change code above this line */}
);
}
};
// Change code below this line
```
# --solutions--
```jsx
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
Types of Food:
{/* Change code below this line */}
{/* Change code above this line */}
);
}
};
// Change code below this line
ReactDOM.render(, document.getElementById('challenge-node'));
```