How to use props.children in React

Krissanawat Kaewsanmuang
Mar 29 · 3 min read

We’ll investigate it in detail today. You can also refer to the official documentation about the same here.

What are children?

The children, in React, refer to the generic box whose contents are unknown until they’re passed from the parent component.

What does this mean? It simply means that the component will display whatever is included in between the opening and closing tags while invoking the component. The component would usually be invoked from App component.

Example with props.children

I’ve a basic react app set up with create-react-app. I will create another component that’ll render the image with an img tag and everything else that goes along.

The photo component is written as self-closing is equivalent to . If we do not have children, we can use the self-closing one. You can convert that to opening and closing one, keeping nothing in between, it works the same.

In my Photo component, I try to see what is in the props.children.

It displays the image and … NOTHING else!

That’s because the Photo component in App has no children.

Let’s say I want to pass few more components along, but the information is not complete. All I want is to have the placeholder in the Photo for any and all my components.

Let’s have a look.

No changes are made to the Photo component. I just passed a div in between Photo.

What else do we get now?

You might want to assume that App will render as its html within the App, but it’s already in another component Photo. It won’t render whatever goes in between in the App. But it knows them as the children of this component as a hierarchy.

> Child
> AnotherChild

All these children can be accessed as this.props.children.

The power of children is that they can be anything.

The possible usage are:

  • Grouping unknown number of similar elements into a parent element.
  • You don’t know elements ahead of the time.
  • The nested structure that needs a wrapper.

The performance remains same with passing props and getting them via props.children, there’s nothing to worry about performance issues.

If sending props is a possibility, avoid using props.children as it’ll be difficult to manage data passed as children as the application grows and needs changes.

If multiple components need the same children, consider assigning them to the variable in render and then pass as children, I have done the same with the above example.

JavaScript in Plain English

Learn the web's most important programming language.

Krissanawat Kaewsanmuang

Written by

React native passionate developer, Coffee addict

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade