Tutorial: Modal - Nested Components

In the previous section we finished working on our component's behavior.

But what if our Modal header's markup was very similar to one that is used in other places though? Ideally we'd move it into a separate component that can be reused. That's what we'll be doing in this section.

Creating CloseHeader

First let's create the new component. Add a src/CloseHeader.js file to your project:

Now let's prepare the template to be similar to the one used by Modal:

Done! Our new component is ready to be used by Modal.

Using CloseHeader

All we have to do is to replace the header markup from Modal's template with a call to CloseHeader:

This will not only render CloseHeader at the right position, but also instantiate it for you. For more details on nested components, check out the guide about it.

Next steps

Now that we have learned how to properly create a new component, it'd good to also know how to test it. The next section will focus on that.

↪ Tutorial: Modal - Testing