4.0 KiB
4.0 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036164 | Create a Component with Composition | 6 | false |
Description
Navbar
, Dashboard
, and Footer
.
To compose these components together, you could create an App
parent component which renders each of these three components as children. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the render
method you could write:
return (When React encounters a custom HTML tag that references another component (a component name wrapped in
<App>
<Navbar />
<Dashboard />
<Footer />
</App>
)
< />
like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the App
component and the Navbar
, Dashboard
, and Footer
.
Instructions
ChildComponent
and a React component called ParentComponent
. Compose the two together by rendering the ChildComponent
within the ParentComponent
. Make sure to close the ChildComponent
tag with a forward slash.
Note: ChildComponent
is defined with an ES6 arrow function because this is a very common practice when using React. However, know that this is just a function. If you aren't familiar with the arrow function syntax, please refer to the JavaScript section.
Tests
tests:
- text: The React component should return a single <code>div</code> element.
testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })(), 'The React component should return a single <code>div</code> element.');
- text: The component should return two nested elements.
testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), 'The component should return two nested elements.');
- text: The component should return the ChildComponent as its second child.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })(), 'The component should return the ChildComponent as its second child.');
Challenge Seed
const ChildComponent = () => {
return (
<div>
<p>I am the child</p>
</div>
);
};
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>I am the parent</h1>
{ /* change code below this line */ }
{ /* change code above this line */ }
</div>
);
}
};
After Test
ReactDOM.render(<ParentComponent />, document.getElementById('root'))
Solution
const ChildComponent = () => {
return (
<div>
<p>I am the child</p>
</div>
);
};
class ParentComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>I am the parent</h1>
{ /* change code below this line */ }
<ChildComponent />
{ /* change code above this line */ }
</div>
);
}
};