Passing props to a component

One card component, many teas

In Your first component, the menu page used TeaCard three times, and all three cards said the same thing, because the tea was typed into the component. A real menu needs each card to show its own tea. The parent, MenuPage, should say which tea each card shows, and TeaCard should only draw it. That is what props are for. The result is live:

1function TeaCard({ name, price }) {2  return (3    <article className="tea-card">4      <h3>{name}</h3>5      <p>${price}</p>6    </article>7  );8}9 10export default function MenuPage() {11  return (12    <main>13      <TeaCard name="Green tea" price={3} />14      <TeaCard name="Chai" price={4} />15      <TeaCard name="Iced lemon tea" price={5} />16    </main>17  );18}

Look at the bottom first. Lines 13 to 15 use TeaCard three times, each with two attributes, like name="Chai" price={4} on line 14. On a component's tag, these are called props, short for "properties". They're written like the attributes in JavaScript in JSX with curly braces: a string in quotes, anything else in braces.

Now the top. Line 1 says TeaCard takes a name and a price, and lines 4 and 5 show them. The result shows three different cards from one function: Green tea $3, Chai $4, and Iced lemon tea $5. Press Edit & run and change price={4} on line 14 to price={6}: only the Chai card changes.

Props arrive as one object

A component is a function, and it gets all its props in its first parameter, as one object. This card takes that object whole, calls it props, and prints it. Press Edit & run to see the console:

1function TeaCard(props) {2  console.log(props);3  return (4    <article className="tea-card">5      <h3>{props.name}</h3>6      <p>${props.price}</p>7    </article>8  );9}10 11export default function MenuPage() {12  return <TeaCard name="Green tea" price={3} />;13}

Line 1 names the parameter props. Line 2 prints it: { name: "Green tea", price: 3 }, the two attributes from line 12 as an object. Lines 5 and 6 read each one with a dot, props.name and props.price. You'll see the log twice: in development, the StrictMode every new project has calls each component twice to catch mistakes, which the Keeping components pure lesson explains.

Where does the object come from? Remember from Writing markup with JSX that every tag becomes a jsx() call. Here is line 12, compiled:

jsx(TeaCard, { name: "Green tea", price: 3 });

The first argument is your function, TeaCard, and the second is the props object, built from the attributes. When React renders this element, it calls TeaCard with that object. Props are a function's arguments, gathered into one object.

Most components don't keep the whole object. They take out the props they need with destructuring, right in the parameter list, as the menu's line 1 does: function TeaCard({ name, price }). That's short for this:

function TeaCard(props) {
  const { name, price } = props;
  // …the same return as before
}

Line 2 makes two variables from the object's properties of the same names. A prop you don't name is simply not used. Destructuring is the usual way to read props, and the JavaScript you need for React lesson shows more of it.

Since props are function arguments, they can be any JavaScript value. The quotes or braces you write decide which. These two tags look almost the same:

1function PriceTag({ price }) {2  return <p>With a cookie: ${price + 1}</p>;3}4 5export default function App() {6  return (7    <>8      <PriceTag price={3} />9      <PriceTag price="3" />10    </>11  );12}

Line 8 passes the number 3, so line 2 adds 1 and shows $4. Line 9 passes the string "3", and + on a string joins text, so it shows $31. Use braces for numbers, booleans, and everything that isn't text. Objects and functions work too:

1function TeaCard({ tea, onAdd }) {2  return (3    <article className="tea-card">4      <h3>{tea.name}</h3>5      <p>${tea.price}</p>6      <button onClick={onAdd}>Add to cart</button>7    </article>8  );9}10 11export default function MenuPage() {12  return (13    <TeaCard14      tea={{ name: "Chai", price: 4 }}15      onAdd={() => console.log("Chai added")}16    />17  );18}

Line 14 passes an object, with the double curlies from the last lesson: outer braces for JavaScript, inner ones for the object. Line 15 passes an arrow function, and line 6 hands it to the button's onClick. Click Add to cart: the console says Chai added. Passing functions is how a child tells its parent something happened; the Responding to events lesson goes further.

Two names are special. key, which you'll give list items, is kept by React and never reaches your component; props.key is undefined, and React warns if you read it. And since React 19, ref reaches a function component as an ordinary prop; Manipulating the DOM with refs covers it.

Default values for missing props

Most teas come in a regular size, so the parent shouldn't have to write size="Regular" every time. Destructuring can give a prop a default value, with =:

1function TeaCard({ name, price, size = "Regular" }) {2  return (3    <article className="tea-card">4      <h3>{name}</h3>5      <p>{size}: ${price}</p>6    </article>7  );8}9 10export default function MenuPage() {11  return (12    <main>13      <TeaCard name="Green tea" price={3} />14      <TeaCard name="Chai" price={5} size="Large" />15      <TeaCard name="Oolong" price={4} size={undefined} />16      <TeaCard name="Mint tea" price={3} size={null} />17    </main>18  );19}

Line 1 says: if size is missing, use "Regular". The four cards show when that happens:

• Line 13 leaves size out. It's undefined, so the default fills in: Regular: $3.
• Line 14 passes "Large", so the default isn't needed: Large: $5.
• Line 15 passes undefined on purpose. That counts as missing: Regular: $4.
• Line 16 passes null. That's a value, so the default isn't used, and React shows nothing for null: the card says only : $3.

How to read this table: each row is one way a parent can write the prop, and the value size gets.

Older React code set defaults another way, with a defaultProps object on the function. The React 19 upgrade guide removed it from function components, and React 19.3.1 ignores it without a word:

1function TeaCard({ name, size }) {2  return <p>{name}: [{size}]</p>;3}4 5TeaCard.defaultProps = { size: "Regular" };6 7export default function MenuPage() {8  return <TeaCard name="Green tea" />;9}

Line 5 sets the old-style default, and line 8 leaves size out. The brackets on line 2 stay empty: Green tea: []. If you meet defaultProps in older code, move each default into the destructuring. (Class components, an older way to write components, still support it.)

The children prop: markup inside a component

So far every component tag closed itself, <TeaCard />. A component can also have an opening and a closing tag, with markup between them, like a <div>. That markup reaches the component as a prop named children. This is how you build wrappers: a panel, a card frame, a dialog box.

1function Panel({ title, children }) {2  return (3    <section className="panel">4      <h3>{title}</h3>5      {children}6    </section>7  );8}9 10export default function ShopPage() {11  return (12    <>13      <Panel title="Today's special">14        <p>Chai with a free cookie, $4.</p>15      </Panel>16      <Panel title="Join the tea club">17        <input placeholder="Email" />18        <button>Join</button>19      </Panel>20    </>21  );22}

Line 1 takes two props, title and children. Line 4 shows the title, and line 5 places {children} under it. In ShopPage, lines 13 to 15 put a paragraph between <Panel> and </Panel>, and lines 16 to 19 put a box and a button. The result shows both panels, each with its own content, inside the same frame from styles.css.

children isn't special syntax. Here are lines 13 to 15 as TypeScript's compiler writes them:

jsx(Panel, {
  title: "Today's special",
  children: jsx("p", { children: "Chai with a free cookie, $4." }),
});

The paragraph is just another key in the props object, on line 3. You could even write children= as an attribute; nobody does, because markup between the tags is easier to read.

What arrives in children depends on what you write between the tags. Pick one below, and React renders it on this page:

1function Inspect({ children }) {2  return <div className="inspect">{children}</div>;3}4 5export default function App() {6  return <Inspect></Inspect>;7}

Nothing between the tags gives undefined, text gives a string, one tag gives one element, and two or more pieces give an array. Even Chai: {4} is two pieces, the text and the number. You rarely need to know which: place {children} in your markup, and React shows whatever it is, as the last lesson's braces do.

Passing props along with spread

Tea data often arrives as objects, and writing name={chai.name} price={chai.price} … for every property is long. JSX lets you spread an object onto a tag:

1const chai = { name: "Chai", price: 4, size: "Large" };2 3function TeaCard({ name, price, size }) {4  return (5    <article className="tea-card">6      <h3>{name}</h3>7      <p>{size}: ${price}</p>8    </article>9  );10}11 12export default function MenuPage() {13  return <TeaCard {...chai} />;14}

Line 13, <TeaCard {...chai} />, passes each property of chai (line 1) as its own prop: the same as name={chai.name} price={chai.price} size={chai.size}. The card shows Large: $4.

Spread also works the other way, to pass along props you don't use. This is common for small components that wrap one HTML element:

1function ShopButton({ variant = "plain", ...rest }) {2  return <button className={`btn ${variant}`} {...rest} />;3}4 5export default function Checkout() {6  return (7    <>8      <ShopButton variant="primary" type="submit">Pay $7</ShopButton>9      <ShopButton disabled aria-label="Remove Chai">Remove</ShopButton>10    </>11  );12}

Line 1 takes variant, with a default, and collects every other prop into rest with the ... rest syntax. Line 2 uses variant for the class and spreads rest onto the real <button>. So line 8's type="submit" and line 9's disabled and aria-label reach the button. So do the words Pay $7 and Remove: they're children, and children is a prop like any other, so it travels in rest. Line 9's disabled with no value means disabled={true}; the second button is greyed out.

Spread is short to write, and that's also its risk. This card spreads everything it gets onto its element:

1function TeaCard({ name, ...rest }) {2  return (3    <article className="tea-card" {...rest}>4      <h3>{name}</h3>5    </article>6  );7}8 9const chai = { name: "Chai", price: 4, inStock: true, className: "sale" };10 11export default function MenuPage() {12  return <TeaCard {...chai} />;13}

The result looks almost right, but three things went wrong. Press Edit & run to read the console:

1. Stray attributes. price isn't an HTML attribute, but it lands on the page as price="4". Right-click the card and inspect it to see it.
2. Warnings. inStock can't be an attribute at all, so React warns: React does not recognize the `inStock` prop on a DOM element.
3. Replaced values. Props are read left to right, and a later one wins. {...rest} comes after className="tea-card" on line 3, so the data's className: "sale" replaces it, and the card loses its border.

Spread is fine when you choose what goes in, as ShopButton does: it forwards button attributes to a button. Otherwise, name your props, so anyone reading the component can see what it takes. Also never spread an object that holds a key: React warns, and wants key written on the tag itself.

Props are read-only

A happy hour takes a dollar off every tea. The quickest idea is to change the price prop inside the card. Here it is, with React 19.3.1 in development, as every live example runs:

1function TeaCard(props) {2  props.price = props.price - 1;3  return (4    <article className="tea-card">5      <h3>{props.name}</h3>6      <p>Happy hour: ${props.price}</p>7    </article>8  );9}10 11export default function MenuPage() {12  return <TeaCard name="Chai" price={4} />;13}

The result is an error: Cannot assign to read only property 'price' of object '#<Object>', from line 2. In development, React freezes every props object with Object.freeze, so its properties can't be changed. Your component file is a module, and modules run in strict mode, where writing to a frozen property throws instead of failing quietly. Here is where React does it, in ReactJSXElement.js, the file that builds every element:

    if (Object.freeze) {
      Object.freeze(element.props);
      Object.freeze(element);
    }

These lines sit inside if (__DEV__), a block that only development builds keep. Read them at lines 276 to 279 of ReactJSXElement.js, release v19.3.1, and the block's start at line 240. Line 2 freezes the props; line 3 freezes the element that holds them.

A production build, the one your users download, leaves these lines out to save time. There, the same assignment runs without an error and the card shows Happy hour: $3. It looks fixed, but only that one render's object changed. The parent still has 4, and the next time MenuPage renders, it makes a brand-new props object with price: 4, and your change is gone. Code that only works in production is still a bug; development catches it for you.

The fix is to leave the prop alone and work out a new value from it:

1function TeaCard({ name, price }) {2  const happyHourPrice = price - 1;3  return (4    <article className="tea-card">5      <h3>{name}</h3>6      <p>Happy hour: ${happyHourPrice}</p>7    </article>8  );9}10 11export default function MenuPage() {12  return <TeaCard name="Chai" price={4} />;13}

Line 2 makes happyHourPrice from price, and line 6 shows it: Happy hour: $3. The prop is untouched. (The destructured price is a plain local variable, so reassigning it wouldn't touch the props object either, but a new name says what the value means.)

The freeze is shallow: it covers the props object itself, not objects inside it. So this card, which changes a property of an object prop, gets no error at all:

1const chai = { name: "Chai", price: 4 };2 3function TeaCard({ tea }) {4  tea.price = tea.price - 1;5  return (6    <article className="tea-card">7      <h3>{tea.name}</h3>8      <p>Happy hour: ${tea.price}</p>9    </article>10  );11}12 13export default function MenuPage() {14  return <TeaCard tea={chai} />;15}

Line 4 takes a dollar off tea.price, and tea is chai from line 1: the parent's own object, not a copy (the Objects and references lesson explains why). The result says Happy hour: $2, two dollars off, not one. StrictMode called TeaCard twice, and each call took off another dollar from the same object. That double call exists to make exactly this kind of bug show up. In production there's one call per render, so it says $3 at first, then drops a dollar every time the card renders again.

How to read this table: each row asks one question about writing to props, in development and in a production build.

Props that change over time

Read-only doesn't mean fixed forever. A component often shows different props over time: a cart badge's count goes up with every tea. The change happens in the parent, which passes new props. Here the parent keeps the count in state, data React remembers between renders, as in Why React?:

1import { useState } from "react";2 3function CartBadge({ count }) {4  return <p>Cart: <strong>{count}</strong> {count === 1 ? "item" : "items"}</p>;5}6 7export default function ShopHeader() {8  const [count, setCount] = useState(0);9  return (10    <header>11      <CartBadge count={count} />12      <button onClick={() => setCount(count + 1)}>Add a tea</button>13      <button onClick={() => setCount(0)}>Empty cart</button>14    </header>15  );16}

Line 8 keeps count in ShopHeader, starting at 0. Line 11 passes it to CartBadge, which only reads it (line 4). Click Add a tea: line 12 calls setCount(count + 1), React calls ShopHeader again, and line 11 now passes count={1}. React calls CartBadge with a new props object, and the badge says Cart: 1 item. Empty cart sets it back to 0. The State: a component's memory lesson covers useState fully.

Does the badge get the same props object with a new number in it, or a new object? Find out below: the playground keeps every props object CartBadge renders with, and reads each one again after every click.

1import { useState } from "react";2 3function CartBadge({ count }) {4  return <p>Cart: <strong>{count}</strong> {count === 1 ? "item" : "items"}</p>;5}6 7export default function ShopHeader() {8  const [count, setCount] = useState(0);9  return (10    <header>11      <CartBadge count={count} />12      <button onClick={() => setCount(count + 1)}>Add a tea</button>13      <button onClick={() => setCount(0)}>Empty cart</button>14    </header>15  );16}

Each render brings a new object, and the old ones still say exactly what they said: { count: 0 } stays 0. React never changes props. It renders the parent again, which makes new elements with new props, and the old objects are dropped. So props are a snapshot: the parent's data at the moment of one render.

A tea menu wired with props

Here is everything at once, in three files like a real project: App.jsx, Panel.jsx, and TeaCard.jsx, in tabs. Click Add to cart on two teas:

1import { useState } from "react";2import Panel from "./Panel.jsx";3import TeaCard from "./TeaCard.jsx";4 5export default function MenuPage() {6  const [cart, setCart] = useState([]);7  const add = (name) => setCart([...cart, name]);8 9  return (10    <main>11      <Panel title={`Your cart (${cart.length})`}>12        <p>{cart.length === 0 ? "Nothing yet." : cart.join(", ")}</p>13      </Panel>14      <Panel title="Today's teas">15        <TeaCard name="Green tea" price={3} onAdd={add} />16        <TeaCard name="Chai" price={4} size="Large" onAdd={add} />17        <TeaCard name="Iced lemon tea" price={5} soldOut onAdd={add} />18      </Panel>19    </main>20  );21}

• Line 6 keeps the cart in state, and line 7 makes add, a function that puts a name in a new cart array.
• Lines 11 to 13: the first Panel's title comes from a template literal, Your cart (2) after two clicks, and its children is a paragraph listing the cart.
• Lines 15 to 17: three TeaCards. Line 15 uses the size default, line 16 passes size="Large", and line 17 writes soldOut with no value, which passes true. Each gets add as onAdd.
• In the TeaCard.jsx tab, line 1 sets two defaults, and line 6 calls onAdd(name) on a click, so the card tells the parent which tea, and the parent changes the cart.

Data flows down as props: from MenuPage into each Panel and TeaCard. Changes go up as calls to functions the parent passed down, and come back down as new props.

Common mix-ups

• "Props are strings, like HTML attributes." No. Quotes pass a string, but braces pass any value: numbers, objects, arrays, functions. price="3" and price={3} are different props.
• "A component can change its props to update the screen." No. Props are read-only. The parent changes its own data, usually state, and passes new props.
• "A default is used whenever a prop is empty." No. Only when it's missing or undefined. null, "", and 0 are kept.
• "defaultProps sets defaults." Not on function components in React 19: it's ignored. Use a default in the destructuring.
• "children is special syntax." No. It's an ordinary prop that holds what's between the tags, and it only shows where the component writes {children}.
• "Spreading props is always safe." No. Unknown props become attributes or warnings, and a later prop replaces an earlier one with the same name.
• "No error means it's fine to change props." No. Production builds don't freeze props, and objects inside props are never frozen. The bug is still there.

Practice exercises

Each exercise shows its result under the code, or when you press Edit & run. Change the code, and the result updates as you type. Try it yourself first, then use the hints.

function TeaCard({ name, price, size = "Regular" }) {
  return (
    <article className="tea-card">
      <h3>{name}</h3>
      <p>{size}: ${price}</p>
    </article>
  );
}

const tea = { name: "Oolong", price: 4 };

export default function MenuPage() {
  return <TeaCard name={tea.name} price={tea.price} size={tea.size} />;
}

1function TeaCard({ name, price, size = "Regular" }) {2  return (3    <article className="tea-card">4      <h3>{name}</h3>5      <p>{size}: ${price}</p>6    </article>7  );8}9 10const tea = { name: "Oolong", price: 4 };11 12export default function MenuPage() {13  return <TeaCard name={tea.name} price={tea.price} size={tea.size} />;14}

1function TeaCard() {2  return (3    <article className="tea-card">4      <h3>Green tea</h3>5      <p>$3</p>6    </article>7  );8}9 10export default function MenuPage() {11  return (12    <main>13      <TeaCard />14      <TeaCard />15      <TeaCard />16    </main>17  );18}

1function TeaCard({ name, price }) {2  return (3    <article className="tea-card">4      <h3>{name}</h3>5      <p>${price}</p>6    </article>7  );8}9 10export default function MenuPage() {11  return (12    <main>13      <TeaCard name="Green tea" price={3} />14      <TeaCard name="Chai" price={4} />15      <TeaCard name="Mint tea" price={2} />16    </main>17  );18}

1function Card({ title }) {2  return (3    <section className="panel">4      <h3>{title}</h3>5    </section>6  );7}8 9export default function TeaGuide() {10  return (11    <>12      <Card title="Green tea">13        <p>Steep for 3 minutes.</p>14      </Card>15      <Card title="Black tea">16        <p>Steep for 5 minutes.</p>17      </Card>18    </>19  );20}

1function Card({ title, children }) {2  return (3    <section className="panel">4      <h3>{title}</h3>5      {children}6    </section>7  );8}9 10export default function TeaGuide() {11  return (12    <>13      <Card title="Green tea">14        <p>Steep for 3 minutes.</p>15      </Card>16      <Card title="Black tea">17        <p>Steep for 5 minutes.</p>18      </Card>19    </>20  );21}

1const order = { tea: "Green tea", price: 4 };2 3function OrderLine({ order }) {4  order.price = order.price - 1;5  return <p>{order.tea}, happy hour: ${order.price}</p>;6}7 8export default function Receipt() {9  return <OrderLine order={order} />;10}

1const order = { tea: "Green tea", price: 4 };2 3function OrderLine({ order }) {4  const happyHourPrice = order.price - 1;5  return <p>{order.tea}, happy hour: ${happyHourPrice}</p>;6}7 8export default function Receipt() {9  return <OrderLine order={order} />;10}

1function ShopButton({ label }) {2  return <button className="btn">{label}</button>;3}4 5export default function Checkout() {6  return (7    <form>8      <ShopButton label="Pay $7" type="submit" />9      <ShopButton label="Remove Chai" disabled />10    </form>11  );12}

1function ShopButton({ label, ...rest }) {2  return (3    <button className="btn" {...rest}>4      {label}5    </button>6  );7}8 9export default function Checkout() {10  return (11    <form>12      <ShopButton label="Pay $7" type="submit" />13      <ShopButton label="Remove Chai" disabled />14    </form>15  );16}

1import { useState } from "react";2 3function CartBadge({ count }) {4  return (5    <p>6      Cart: <strong>{count}</strong>{" "}7      <button onClick={() => { count = count + 1; }}>Add a tea</button>8    </p>9  );10}11 12export default function ShopHeader() {13  const [count, setCount] = useState(0);14  return <CartBadge count={count} />;15}

1import { useState } from "react";2 3function CartBadge({ count, onAdd }) {4  return (5    <p>6      Cart: <strong>{count}</strong>{" "}7      <button onClick={onAdd}>Add a tea</button>8    </p>9  );10}11 12export default function ShopHeader() {13  const [count, setCount] = useState(0);14  return <CartBadge count={count} onAdd={() => setCount(count + 1)} />;15}

Check your understanding

For each code question, write down the props object each component gets first, with each value's type. Press Edit & run on a question's code to check your answer.

Key takeaways

• Props are how a parent passes data to a component. React gathers a tag's props into one object and calls the component with it.
• Read props with destructuring, function TeaCard({ name, price }), and give missing ones defaults with =. Defaults apply to missing and undefined props, not null.
• Markup between a component's tags arrives as the children prop, and shows where the component places it.
• Spread passes an object's properties as props, and rest forwards the ones you don't use. Choose what you spread: extra props land on elements, and later props win.
• Props are read-only. React freezes them in development, so writing to one throws; production skips the freeze, but the write is still a bug. New data comes as new props from the parent, every render.

Coming next: Conditional rendering. It uses props to decide what a component shows, with if, the ternary operator, &&, and null.