← React Beginner Questions - Set 1 Q8

What are props in React?

React Beginner Questions - Set 1

Props are the arguments of a component. They flow one way, from parent to child, and the child must not mutate them.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function Price({ amount, currency = 'USD' }) {
  return <strong>{currency} {amount.toFixed(2)}</strong>;
}

function ProductCard({ product, onAdd }) {
  return (
    <div className="card">
      <h3>{product.name}</h3>
      <Price amount={product.price} currency={product.currency} />
      <button onClick={() => onAdd(product.id)}>Add to cart</button>
    </div>
  );
}

// <ProductCard product={lamp} onAdd={addToCart} />

What to notice

• Default values belong in the destructuring (`currency = 'USD'`), not in a separate `defaultProps` object.
• Functions are props too — that is how a child reports an event upwards.
• Mutating `product` inside the child would be a bug: props are read-only by contract.