Seeing your React applications as a hierarchy of components is an important part of working with React. All components in React form parent-children relationships.
For this article, you will need a basic understanding of how to use React components in your application to follow along. We'll be using JSX to declare our components as well. If you'd like to learn about components' hierarchy in React, check how to specify Children with JSX and Thinking in React guide.
Let's start with an application that shows a dialog:
We've got two components here:
App component represents our application. It uses the
DialogMessage to display a dialog. In the
App component we use properties of the
DialogMessage to define its title and a handler for a close event. We use state with
useState() function to control the visibility of the dialog. The dialog contains three
div elements for a header, content, and actions.
Now, let's add another dialog message. This time, instead of a simple message we'd like to show a list of items. The straightforward way to do that would be to create a new component like this:
Now we've got two similar dialog components. Both dialogs control their visibility in the same way. It is only the content that is different. In the
DialogMessage we've got a text, and in the
DialogList we've got a
<ul> element with list items.
The problem here is in the code duplication. If we'll go on adding dialogs this way, we'd need to create a new dialog component for every new type of message. This is time-consuming and we duplicate the code for the dialog logic even that it stays the same for all dialogs.
What we'd like to have in our application may look like that:
In this example, we've got a single
Dialog component. We use it to show different types of content. We want to be able to wrap any content with our
Dialog component. The same way as we use standard
<div> element to wrap other components.
Here's where the
children property comes to the rescue.
As we've seen, using JSX we define children for a component between its opening and closing tags. It turns out that React provides a special
children property that gives access to children components of a component. This property is available for all React components. We can use this property to render children components.
Here's how the implementation would look like for the
In this example, we use the
props.children in the
Dialog component. We add children components into the content
div element. We can use a single or multiple components as children, or leave the dialog empty.
Now we have got a single implementation for our dialog.
Using other components as children components is one of the key concepts in React. In this article, we've seen how we can build more reusable components using the
children property. There are more advanced approaches that use this property. Links to them are available below.
Here are additional links that will allow you to learn more about using the
You can access the content of the
childrenproperty using utility functions provided by React.Children.
A great article describing React approach for using composition of components over inheritance.
Advanced approach with passing a function as a children property. This approach is often used by UI libraries in React.