Introduction to React children Property and Building Better Components With It

In React we create new components using other components as building blocks. In this article, you will learn how we can build more reusable components with the children property.

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 and DialogMessage. The 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.

Using children Property for Reusability

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 Dialog component:

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.

Conclusion

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.

More Resources

Here are additional links that will allow you to learn more about using the children property: