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
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
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.
All these children can be accessed as
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.