5.1 KiB
5.1 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036167 | Render a Class Component to the DOM | 6 | false |
Description
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
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.
Tests
tests:
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');
- text: The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.');
- text: The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.');
- text: The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.
testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><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><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })(), 'The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.');
Challenge Seed
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
Before Test
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>
);
};
Solution
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'));