React Essentials — Components, JSX, Props, State & MoreEntry 4 of 11

Multiple Slots and Passing Components as Props

A component can accept several pieces of JSX as separate props, and can even receive a component type to use as its wrapper element.

Notes

children is only one slot. When a component needs content in several places, pass extra JSX through named props such as buttons.

You can also pass a component or element type itself. Pass a string for built-in elements ("ul") or the function reference for custom components (Section, not <Section />). Inside the receiving component, alias the prop to a capitalized name so JSX treats it as a component rather than an HTML tag.

What / Why / When

What: Named JSX slots, plus a configurable wrapper type.
Why: The layout component controls structure while the caller controls content and markup.
When: A layout has multiple content regions, or its wrapper element must vary.
Use case: A Tabs component with a button row and a content area, where the button container can be a <menu>, <ul>, or <div>.

Code compare

React

import type { ElementType, ReactNode } from "react";type TabsProps = {  buttons: ReactNode;  children: ReactNode;  buttonsContainer?: ElementType;};export function Tabs({  buttons,  children,  buttonsContainer: ButtonsContainer = "menu", // capitalized alias}: TabsProps) {  return (    <>      <ButtonsContainer>{buttons}</ButtonsContainer>      {children}    </>  );}

Angular

import { Component } from "@angular/core";@Component({  selector: "app-tabs",  template: `    <menu><ng-content select="[tabButtons]" /></menu>    <ng-content />  `,})export class TabsComponent {}

Differences and gotchas

Angular named slots use CSS selectors (select="[tabButtons]") instead of named props.
Angular has no direct equivalent of a dynamic wrapper element. Use @switch for a few fixed options, or NgComponentOutlet to render a component type passed as an input.

Quick reference

React	Angular
`buttons={<>...</>}` prop	`<ng-content select="[tabButtons]" />`
`buttonsContainer={Section}`	`NgComponentOutlet` or `@switch`