I’ve developed with React for months without fully understanding the real power of the React component model. One day I decided to dive into composition, and this is what I learned.
In React, a component can have one, many, or no children. Great, but wait — what are “children”? Let’s explain with an example:
<Profile>
<ProfileImage src="/asset/profile-img.png" />
<ProfileDetails name="Antonello" surname="Zanini" />
</Profile>
The Profile
component has two children: ProfileImage
and ProfileDetails
, while these two have no children.
_“In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop:
_props.children_
” — _React documentation
Essentially, props.children
is a special prop, automatically passed to every component, that can be used to render the content included between the opening and closing tags when invoking a component. These kinds of components are identified by the official documentation as “boxes”.
#react #javascript