160 lines
4.3 KiB
Markdown
160 lines
4.3 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036167
|
|
title: Render a Class Component to the DOM
|
|
challengeType: 6
|
|
forumTopicId: 301404
|
|
dashedName: render-a-class-component-to-the-dom
|
|
---
|
|
|
|
# --description--
|
|
|
|
You may remember using the ReactDOM API in an earlier challenge to render JSX elements to the DOM. The process for rendering React components will look very similar. The past few challenges focused on components and composition, so the rendering was done for you behind the scenes. However, none of the React code you write will render to the DOM without making a call to the ReactDOM API.
|
|
|
|
Here's a refresher on the syntax: `ReactDOM.render(componentToRender, targetNode)`. The first argument is the React component that you want to render. The second argument is the DOM node that you want to render that component within.
|
|
|
|
React components are passed into `ReactDOM.render()` a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example `ReactDOM.render(<ComponentToRender />, targetNode)`. You use this syntax for both ES6 class components and functional components.
|
|
|
|
# --instructions--
|
|
|
|
Both the `Fruits` and `Vegetables` components are defined for you behind the scenes. Render both components as children of the `TypesOfFood` component, then render `TypesOfFood` to the DOM. There is a `div` with `id='challenge-node'` available for you to use.
|
|
|
|
# --hints--
|
|
|
|
The `TypesOfFood` component should return a single `div` element.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
|
|
return mockedComponent.children().type() === 'div';
|
|
})()
|
|
);
|
|
```
|
|
|
|
The `TypesOfFood` component should render the `Fruits` component after the `h1` element.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
|
|
return mockedComponent.children().childAt(1).name() === 'Fruits';
|
|
})()
|
|
);
|
|
```
|
|
|
|
The `TypesOfFood` component should render the `Vegetables` component after `Fruits`.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
|
|
return mockedComponent.children().childAt(2).name() === 'Vegetables';
|
|
})()
|
|
);
|
|
```
|
|
|
|
The `TypesOfFood` component should render to the DOM within the `div` with the id `challenge-node`.
|
|
|
|
```js
|
|
assert(
|
|
(function () {
|
|
const html = document.getElementById('challenge-node').childNodes[0]
|
|
.innerHTML;
|
|
return (
|
|
html.includes(
|
|
'<div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div>'
|
|
) &&
|
|
html.includes(
|
|
'<div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'
|
|
)
|
|
);
|
|
})()
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --before-user-code--
|
|
|
|
```jsx
|
|
const Fruits = () => {
|
|
return (
|
|
<div>
|
|
<h2>Fruits:</h2>
|
|
<h4>Non-Citrus:</h4>
|
|
<ul>
|
|
<li>Apples</li>
|
|
<li>Blueberries</li>
|
|
<li>Strawberries</li>
|
|
<li>Bananas</li>
|
|
</ul>
|
|
<h4>Citrus:</h4>
|
|
<ul>
|
|
<li>Lemon</li>
|
|
<li>Lime</li>
|
|
<li>Orange</li>
|
|
<li>Grapefruit</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
const Vegetables = () => {
|
|
return (
|
|
<div>
|
|
<h2>Vegetables:</h2>
|
|
<ul>
|
|
<li>Brussel Sprouts</li>
|
|
<li>Broccoli</li>
|
|
<li>Squash</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
class TypesOfFood extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Types of Food:</h1>
|
|
{/* Change code below this line */}
|
|
|
|
{/* Change code above this line */}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
// Change code below this line
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
class TypesOfFood extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Types of Food:</h1>
|
|
{/* Change code below this line */}
|
|
<Fruits />
|
|
<Vegetables />
|
|
{/* Change code above this line */}
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
// Change code below this line
|
|
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));
|
|
```
|