Implementing Named Slots in React With Child Type Inspection

React is known for its minimalistic approach, providing core components, props, and children while allowing developers to define structural composition patterns themselves. One such pattern, not natively available in React, is known as named slots, which enables a parent component to accept multiple distinct pieces of content and decide their rendering locations.

This concept is familiar to Vue.js users, who may have encountered it with the slot name=... syntax. However, React does not have a built-in equivalent, but developers can achieve the same functionality using child type inspection, as explained in this article.

The goal is to build a user profile card, a common component found on platforms like LinkedIn or team directories, with a fixed layout that includes a cover photo, an avatar and name area, and a body divided into sections for personal details, work experience, and contact information. The parent component should be able to control the content for each section, making the card flexible and adaptable to different use cases.

To achieve this, the consumer defines the structure of the profile card in the following manner:

```jsx

ProfileCard

ProfileHeader

<Avatar src="/avatars/jane.jpg" />

<DisplayName>Jane Kowalski</DisplayName>

<ProfileHeader>

<ProfileDetails>

<DetailItem label="Location">London, United Kingdom</DetailItem>

<DetailItem label="Industry">Technology</DetailItem>

<DetailItem label="Member since">March 2019</DetailItem>

</ProfileDetails>

<WorkExperience>

<ExperienceItem company="Acme Corp" role="Senior Product Designer" period="2022 – present" />

<ExperienceItem company="Bright Studio" role="UX Designer" period="2019 – 2022" />

</WorkExperience>

<ContactInfo>

<ContactItem type="email">jane@example.com</ContactItem>

<ContactItem type="linkedin">linkedin.com/in/janekowalski</ContactItem>

</ContactInfo>

</ProfileCard>

```

The JSX structure reads like a document, with each child describing its role. This approach allows the parent component (ProfileCard) to render each section in the correct place, conditionally wrap elements, and add dividers without requiring the consumer to understand the internal workings of the card.

The core mechanism behind this approach involves using `React.Children.toArray()` in combination with type comparison to identify and extract specific child components. The following steps outline the implementation:

1. Import the necessary child components (`ProfileHeader`, `ProfileDetails`, `WorkExperience`, `ContactInfo`) and the `React` library.

2. Define the `ProfileCard` component with a single prop (`children`), which expects a ReactNode array.

3. Convert the `children` prop into an array using `React.Children.toArray(children)`.

4. Identify each child component by iterating through the array and comparing its type using `React.isValidElement(child) && child.type === <ChildType>`.

5. Extract the relevant child components (`header`, `details`, `experience`, `contact`) based on their type.

6. Render the `ProfileCard` by conditionally rendering the extracted child components in the desired structure, using appropriate dividers and class names.

By following this method, developers can replicate the functionality of named slots in React, enabling the creation of modular and flexible components like the user profile card.