Props

Learning objectives#

• Pass and read props
• Destructure props with default values
• Pass functions as props (callbacks)
• Use the special children prop

Explanation#

Props are passed as attributes: <ProductCard name="Pen" price={20} />. Strings can use quotes; everything else goes in { }.

The component receives one object; destructure it: function ProductCard({ name, price = 0 }). Defaults apply when a prop is missing.

Props are read-only. A component must never change its props — data flows one way, from parent to child.

To let a child talk back, pass a function: <AddButton onAdd={handleAdd} />. The child calls onAdd(...) and the parent decides what happens.

children is whatever you put between the tags: <Card><p>Hi</p></Card>. It makes layout components (Card, Modal, Layout) easy.

Spread passes many props at once: <Input {...field} />. Use it carefully — explicit props are easier to read.

Syntax#

1<Button label="Save" disabled={false} onClick={save} />
2

3function Button({ label, disabled = false, onClick }) {
4  return <button disabled={disabled} onClick={onClick}>{label}</button>;
5}

Code example: Data down, events up, children inside#

1import { useState } from 'react';
2

3function Card({ title, children }) {
4  return (
5    <section style={{ border: '1px solid #ddd', padding: 12, marginBottom: 8 }}>
6      <h3>{title}</h3>
7      {children}
8    </section>
9  );
10}
11

12function ProductRow({ name, price, currency = '₹', onAdd }) {
13  return (
14    <p>
15      {name} — {currency}{price}{' '}
16      <button onClick={() => onAdd(name)}>Add</button>
17    </p>
18  );
19}
20

21export default function Shop() {
22  const [cart, setCart] = useState([]);
23

24  function handleAdd(name) {
25    setCart(prev => [...prev, name]);
26  }
27

28  return (
29    <>
30      <Card title="Products">
31        <ProductRow name="Pen" price={20} onAdd={handleAdd} />
32        <ProductRow name="Notebook" price={60} onAdd={handleAdd} />
33      </Card>
34      <Card title={`Cart (${cart.length})`}>
35        <p>{cart.length ? cart.join(', ') : 'Empty'}</p>
36      </Card>
37    </>
38  );
39}

Two cards: “Products” with Pen and Notebook rows, and “Cart (0)” showing “Empty”. Clicking Add on a row adds that product to the cart; the second card title and list update, e.g. “Cart (2)” — “Pen, Notebook”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. Card receives title as a prop and renders whatever is nested inside it via children.
2. ProductRow receives data (name, price) and a default currency.
3. onAdd is a function prop: the row calls it, Shop decides what adding means.
4. Shop owns the cart state; the rows never change it directly.

Real-world use case#

Common mistakes#

Best practices#

• Destructure props with defaults
• Name callback props onSomething
• Use children for layout components
• Keep props few and meaningful

Remember this#

Practice exercise#

1export default function Alert({ type = 'success', children = 'Saved!' }) {
2  const colour = type === 'error' ? 'red' : 'green';
3  return (
4    <div role="alert" style={{ border: `2px solid ${colour}`, padding: 8 }}>
5      {children}
6    </div>
7  );
8}
9// <Alert type="error">Payment failed</Alert>

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.