Props and composition: Frontend Web Development (Expert)

What are props?

Props (short for properties) are the inputs you give a component. You write them like HTML attributes. React collects them into one object and passes that object to your function as its first argument.

javascript

function DishCard(props) {
  return (
    <div className="dish">
      <h3>{props.name}</h3>
      <p>Rs {props.price}</p>
    </div>
  );
}

// Using it:
<DishCard name="Masala dosa" price={90} />
<DishCard name="Veg biryani" price={160} />

Text props go in quotes; numbers, arrays, objects and functions go in { } (React code, runs in a React project)

Think of it like this: Think of a wedding card printing shop. The card design is the component. Each family brings an order slip with names, date and venue: those are the props. The same design prints a different card for every slip, and the printer never changes what is written on your slip.

Destructuring and default values

javascript

function DishCard({ name, price, veg = true, spicy = false }) {
  return (
    <div className="dish">
      <h3>{name} {veg ? '(veg)' : '(non-veg)'}</h3>
      <p>Rs {price}{spicy && ' - spicy'}</p>
    </div>
  );
}

Destructure props in the parameters; veg = true is a default used when the parent leaves veg out (React code, runs in a React project)

typescript

type DishCardProps = {
  name: string;
  price: number;
  veg?: boolean;
};

function DishCard({ name, price, veg = true }: DishCardProps) {
  return <h3>{name}: Rs {price} {veg && '(veg)'}</h3>;
}

In a TypeScript project (.tsx files), give props a type so mistakes show up in your editor (React code, runs in a React project)

Props are read-only

Careful: A component must never change its props: treat them like a function argument you only read. Never write props.price = 100 or push into an array prop. React expects components to be pure: the same props give the same output. If the screen must change, the parent passes new props (usually from its state, the next topic).

One-way data flow

Data flows down the tree: parent to child, through props. A child cannot reach up and change its parent's data. When a child needs to ask for a change, the parent passes a function as a prop, and the child calls it.

javascript

function AddButton({ onAdd }) {
  return <button onClick={onAdd}>Add</button>;
}

function DishRow({ dish }) {
  function handleAdd() {
    console.log('Add', dish.name);
  }
  return (
    <li>
      {dish.name} <AddButton onAdd={handleAdd} />
    </li>
  );
}

The parent gives the child a function; the child calls it when clicked (React code, runs in a React project)

children: wrapping content

Whatever you put between the opening and closing tags of a component arrives in a prop called children. This lets you build wrappers such as Card, Modal or PageLayout, which add a frame around any content. Building bigger parts from smaller ones like this is called composition.

javascript

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      {children}
    </section>
  );
}

<Card title="Delivery address">
  <p>12, MG Road, Bengaluru 560001</p>
  <button>Change</button>
</Card>

The p and button inside <Card> become its children (React code, runs in a React project)

Conditional rendering

To show something only sometimes, use plain JavaScript. Use a ternary (a ? b : c) to choose one of two things, && to show something or nothing, and an early return null to show nothing at all.

javascript

function StockBadge({ stock }) {
  if (stock === undefined) return null;
  return (
    <>
      {stock === 0 ? <span className="out">Out of stock</span> : <span>In stock</span>}
      {stock > 0 && stock < 5 && <span className="low">Only {stock} left</span>}
    </>
  );
}

null, false and undefined render nothing (React code, runs in a React project)

Careful: Be careful with && and numbers. {count && <Badge />} shows a 0 on the screen when count is 0, because 0 is a value React renders. Write {count > 0 && <Badge />} instead.

Tip: Passing the same prop down through many levels is called prop drilling. For data that many components need, such as the theme or the logged-in user, React has Context (createContext and useContext). Learn props well first; reach for Context only when drilling becomes painful.

Props and composition

Explanation

What are props?

Destructuring and default values

Props are read-only

One-way data flow

children: wrapping content

Conditional rendering

Watch the lesson

In real life: Train search results

Practice (0/3 done)

Quick quiz

Read more (free)