151 lines
3.5 KiB
Markdown
151 lines
3.5 KiB
Markdown
---
|
|
id: 5a24c314108439a4d4036165
|
|
title: Use React to Render Nested Components
|
|
challengeType: 6
|
|
forumTopicId: 301420
|
|
dashedName: use-react-to-render-nested-components
|
|
---
|
|
|
|
# --description--
|
|
|
|
The last challenge showed a simple way to compose two components, but there are many different ways you can compose components with React.
|
|
|
|
Component composition is one of React's powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in the last challenge. You break down your UI into its basic building blocks, and those pieces become the components. This helps to separate the code responsible for the UI from the code responsible for handling your application logic. It can greatly simplify the development and maintenance of complex projects.
|
|
|
|
# --instructions--
|
|
|
|
There are two functional components defined in the code editor, called `TypesOfFruit` and `Fruits`. Take the `TypesOfFruit` component and compose it, or *nest* it, within the `Fruits` component. Then take the `Fruits` component and nest it within the `TypesOfFood` component. The result should be a child component, nested within a parent component, which is nested within a parent component of its own!
|
|
|
|
# --hints--
|
|
|
|
The `TypesOfFood` component should return a single `div` element.
|
|
|
|
```js
|
|
assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
|
|
```
|
|
|
|
The `TypesOfFood` component should return the `Fruits` component.
|
|
|
|
```js
|
|
assert(
|
|
Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type
|
|
.name === 'Fruits'
|
|
);
|
|
```
|
|
|
|
The `Fruits` component should return the `TypesOfFruit` component.
|
|
|
|
```js
|
|
assert(
|
|
Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() ===
|
|
'<h2>Fruits:</h2>'
|
|
);
|
|
```
|
|
|
|
The `TypesOfFruit` component should return the `h2` and `ul` elements.
|
|
|
|
```js
|
|
assert(
|
|
Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() ===
|
|
'ApplesBlueberriesStrawberriesBananas'
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --after-user-code--
|
|
|
|
```jsx
|
|
ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
|
|
```
|
|
|
|
## --seed-contents--
|
|
|
|
```jsx
|
|
const TypesOfFruit = () => {
|
|
return (
|
|
<div>
|
|
<h2>Fruits:</h2>
|
|
<ul>
|
|
<li>Apples</li>
|
|
<li>Blueberries</li>
|
|
<li>Strawberries</li>
|
|
<li>Bananas</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Fruits = () => {
|
|
return (
|
|
<div>
|
|
{ /* Change code below this line */ }
|
|
|
|
{ /* Change code above this line */ }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|
|
};
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```jsx
|
|
const TypesOfFruit = () => {
|
|
return (
|
|
<div>
|
|
<h2>Fruits:</h2>
|
|
<ul>
|
|
<li>Apples</li>
|
|
<li>Blueberries</li>
|
|
<li>Strawberries</li>
|
|
<li>Bananas</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Fruits = () => {
|
|
return (
|
|
<div>
|
|
{ /* Change code below this line */ }
|
|
<TypesOfFruit />
|
|
{ /* Change code above this line */ }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
class TypesOfFood extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h1>Types of Food:</h1>
|
|
{ /* Change code below this line */ }
|
|
<Fruits />
|
|
{ /* Change code above this line */ }
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
```
|