Create a Component with Composition

Create a Component with Composition

Challenge: Create a Component with Composition

Intro: Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a Navbar, Dashboard, and Footer. To compose these components together, you could create an Appparent 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 (
<App>
<Navbar />
<Dashboard />
<Footer />
</App>
)

When React encounters a custom HTML tag that references another component (a component name wrapped in < /> 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: In the code editor, there is a simple functional component called 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.

MemberClouds was originally created as a private Members-Only Community Hub for our MasterMind Groups. This Website was indented to be the central hub for all of our members to share ideas, help each other out, and ask questions 24/7.

MemberClouds (MC) has grown into a collection of mini sites. FCC is one of several sites.