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.

React Components and Children

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