Useful Cheatsheets
Build / Code / React

React Props and Children

Pass data down the component hierarchy using immutable props, destructuring patterns, and special children composition.

TL;DR

  1. Pass data downward into child components using immutable props arguments.
  2. Destructure incoming properties with sensible fallback defaults in signatures.
  3. Nest visual layout content between element tags using children.
Jump to section

Passing and Reading Props

    Direct Props Object

    Receive the full props object as the first function argument.

    export function Badge(props: { text: string }) {
  return <BadgeView text={props.text} />;
}
    Destructured Props

    Unpack specific keys directly inside parameter parenthesis.

    export function Badge({ text }: { text: string }) {
  return <BadgeView text={text} />;
}
    Default Prop Values

    Provide sensible fallback values for optional props.

    function Alert({ role = 'info' }: AlertProps) {
  return <AlertBox className={`alert-${role}`} />;
}

Children Prop Composition

    Container Wrapper

    Render nested child JSX nodes using the children prop.

    export function Box({
  children,
}: { children: React.ReactNode }) {
  return <BoxFrame>{children}</BoxFrame>;
}
    Call Site Nesting

    Nest custom elements or text between component tags.

    <Box>
  <CardHeader>Card Heading</CardHeader>
  <CardBody>Nested child content.</CardBody>
</Box>
    Multiple Slot Props

    Pass React nodes via named props for distinct visual slots.

    export function Panel({
  header,
  footer,
}: PanelProps) {
  return <CardView top={header} bot={footer} />;
}

Advanced Prop Patterns

    Rest Prop Spreading

    Forward remaining HTML attributes to underlying DOM nodes.

    function Input({ label, ...rest }: InputProps) {
  return <InputBase {...rest} />;
}
    Callback Props

    Pass handler functions to allow children to report events.

    function DeleteBtn({ onConfirm }: ActionProps) {
  return <Button onClick={onConfirm}>Delete</Button>;
}
    Boolean Prop Flag

    Passing a prop name without value evaluates to true.

    <Button primary outlined />

TypeScript Prop Contracts

    Interface Contract

    Declare explicit prop shapes with optional properties.

    interface ButtonProps {
  title: string;
  disabled?: boolean;
  onClick: () => void;
}
    PropsWithChildren Helper

    Standard generic type including the children property.

    import { PropsWithChildren } from 'react';
type CardProps = PropsWithChildren<{
  variant: 'light' | 'dark';
}>;
    Polymorphic Component

    Allow callers to customize the underlying HTML tag.

    type BoxProps = { as?: 'div' | 'section' };

Tips

  1. Treat all incoming props as strictly read-only values to maintain unidirectional data flow across your component hierarchy.
  2. Use TypeScript interface definitions to document and enforce component prop contracts directly within your code editor.

Warnings

  1. Never mutate props directly inside child components because doing so violates fundamental React rendering purity guarantees.
  2. Avoid excessive prop drilling across multiple nested layers by leveraging component composition or context sharing.

In Practice

FAQ