3,120 reads

Introduction to props.children in React

by Krissanawat KaewsanmuangAugust 26th, 2018

Too Long; Didn't Read

We’ll investigate it in detail today. You can also refer to the official documentation about the same <a href="https://reactjs.org/docs/composition-vs-inheritance.html">here</a>.

Companies Mentioned

featured image - Introduction to props.children in React

The props.children hold everything that’s passed between the , which are all buttons. So it just renders the passed button as it is.

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

props.children is rarely used in real projects because of lack of the necessity and difficulty to micro-manage compared to props, but there can be a few such cases that would make sense of it, look at my calculator tutorial!

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 it’s 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.

Component> Child> AnotherChild

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

The power of the children is it 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.

Originally published at React Ninja.

Featured React JS Courses

React 16 — The Complete Guide (incl. React Router 4 & Redux)

4.7/5 Stars || 33.5 Hours of Video || 61,597 Students

Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder! Learn More.

React 16 - The Complete Guide (incl. React Router 4 & Redux)

Modern React with Redux

4.6/5 Stars || 26 Hours of Video || 111,998 Students || 33,630 ratingsMaster the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6 Learn More.