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.
Component
> 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.
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 Course (incl. React Router 4 & Redux)
Disclaimer
This post contains affiliate links to products. We may receive a commission for purchases made through these links.
Top comments (0)