Props

What you'll learn

How to pass values into a component with props and read them inside it.

Why it matters

A reusable component is only useful if you can customise it. Props are how a parent tells a child what to show.

Explanation

Props (short for properties) are the inputs to a component. You pass them like HTML attributes, and the component receives them as an object.

It is common to destructure the object in the parameter list, which is shorter:

Strings go in quotes: name="Asha". Anything else (numbers, booleans, arrays) goes in curly braces: price={40}.

Props are read-only. A component must never change the props it receives. Data flows one way: from parent down to child.

Example

Step-by-step walkthrough

1. Product destructures three props from its argument.
2. App renders it twice with different values.
3. {inStock ? "In stock" : "Sold out"} is a ternary: a compact if/else that works inside JSX.
4. The first card shows Notebook, 40 rupees, In stock. The second shows Pen, 10 rupees, Sold out.

Try it yourself

Add a third product and a new prop called color shown in the card.

PropsReact

Editable codefunction Product({ name, price, inStock }) { return ( <div style={{ border: "1px solid #ccc", padding: 12, margin: "8px 0" }}> <strong>{name}</strong> - {price} rupees <div>{inStock ? "In stock" : "Sold out"}</div> </div> ); } function App() { return ( <div style={{ fontFamily: "system-ui" }}> <Product name="Notebook" price={40} inStock={true} /> <Product name="Pen" price={10} inStock={false} /> </div> ); }

Run ResetCopyCtrl+Enter to run

Common mistakes

• Mutating props. Never write props.name = "x".
• Quoting numbers. price="40" passes the text "40", not a number.
• Forgetting braces around non-string values.
• Misspelling a prop in the parent so the child gets undefined.

Quick quiz

Summary

• Props pass data from parent to child.
• Destructure them in the parameter list; use { } for non-strings.
• Props are read-only. For changing data, use state.

Next: state.

function Greeting({ name }) {
  return <h2>Hello, {name}</h2>;
}

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

<Greeting name="Asha" />

function Product({ name, price, inStock }) {
  return (
    <div style={{ border: "1px solid #ccc", padding: 12, margin: "8px 0" }}>
      <strong>{name}</strong> - {price} rupees
      <div>{inStock ? "In stock" : "Sold out"}</div>
    </div>
  );
}

function App() {
  return (
    <div style={{ fontFamily: "system-ui" }}>
      <Product name="Notebook" price={40} inStock={true} />
      <Product name="Pen" price={10} inStock={false} />
    </div>
  );
}