Typed React Props from Attributes to children

Pass data like HTML attributes, type props in TypeScript, destructure safely, and keep props read-only.

1068 words

React props with TypeScript (2026 starter)

In a Restarting React series aimed at React 19.2 + compiler-friendly TypeScript, the early ProductCard had a flaw: product fields lived inside the component. Reuse demands props — data passed from parents like HTML attributes.

Pass props like attributes

function ProductCard() {
  const product = { name: 'Mechanical Keyboard', price: 89000 }; // fixed
  return <h2>{product.name}</h2>;
}

// receiving side
function ProductCard(props) {
  return <h2>{props.name}</h2>;
}

Parent owns the data; child renders it.

Typing props

Define an interface (or type) for the props object:

// passing side
<ProductCard name="Mechanical Keyboard" />
<ProductCard name="Wireless Mouse" />

type ProductCardProps = {
  name: string;
  price: number;
};

The compiler catches missing fields and wrong types before runtime.

Destructure for clarity

function ProductCard(props: ProductCardProps) {
  return (
    <div className="card">
      <h2>{props.name}</h2>
      <p>{props.price.toLocaleString()} won</p>
    </div>
  );
}

<ProductCard name="Keyboard" price={89000} />      // ✅ OK
<ProductCard name="Keyboard" />                     // 🔴 missing price — error
<ProductCard name="Keyboard" price="89000" />       // 🔴 price is a string — error

Keep the props type on the function parameter so destructuring stays typed.

Optional props and defaults

type ProductCardProps = {
  name: string;
  price: number;
};

// drop the props. and pull values out directly
function ProductCard({ name, price }: ProductCardProps) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{price.toLocaleString()} won</p>
    </div>
  );
}

Mark optional fields with ? and supply defaults either in destructuring or via default parameters.

children

Content between tags arrives as children:

type ProductCardProps = {
  name: string;
  price: number;
  discount?: number; // may or may not be present
};

function ProductCard({ name, price, discount = 0 }: ProductCardProps) {
  const finalPrice = price - discount;
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{finalPrice.toLocaleString()} won</p>
    </div>
  );
}

Type children as React.ReactNode unless you need a narrower contract.

See them in DevTools

// both are valid
<ProductCard name="Keyboard" price={89000} />              // discount is 0
<ProductCard name="Mouse" price={45000} discount={5000} />

Inspect the component tree to verify which props actually arrived — invaluable when debugging wrappers.

Props are read-only

type CardProps = {
  children: React.ReactNode;
};

function Card({ children }: CardProps) {
  return <div className="card">{children}</div>;
}// everything between the tags goes in as children
<Card>
  <h2>Mechanical Keyboard</h2>
  <p>89,000 won</p>
</Card>

Never mutate props inside the child. Lift state or pass a setter callback when the child must request a change.

Wrap-up

function ProductCard({ name, price }: ProductCardProps) {
  price = price * 2; // 🔴 absolutely forbidden — trying to change props directly
  return <p>{price} won</p>;
}

Props plus TypeScript give reusable UI with compile-time contracts. Next steps in the series typically cover state, effects, and data fetching — still with typed boundaries at every layer.

Prefer small examples readers can paste into a sandbox without a monorepo.

All articles Send the brief