Frontend Master

JavaScript Curriculum

Props
+50 XP

Props

easy
~25 min·50 XP

The MenuCard component is written once but needs to display different items — Espresso, Cappuccino, Cold Brew. Props are how you pass the right name, price, and emoji to each instance without duplicating code.

Props

Props (properties) are the inputs to a React component. The parent controls what data the child gets — the child renders it. This one-way flow is the foundation of React's predictable data model.

How Props Flow

Data moves down, callbacks bubble up:

props-flow.jsx
Parent
App
<MenuCard
  name="Espresso"
  price={2.50}
  featured={true}
  emoji="☕"
  onOrder={handleOrder}
/>
props
→
Child
MenuCard
function MenuCard({
  name,
  price,
  featured,
  emoji,
  onOrder,
}) { ... }
Click a prop to inspect
⚠️Props are read-only — always
Never modify props inside a component. `props.name = 'new'` will cause bugs and React will warn you. Props belong to the parent. If the child needs to change something, it calls a callback prop — the parent owns the state and decides whether to update it.

Five Prop Patterns You Need

Required props, defaults, spread, children, and callbacks:

prop-patterns.jsx

Props with no default value are required. If missing, the value is undefined — which can cause runtime errors.

function MenuCard({ name, price }) {
  // name and price are REQUIRED
  // If not passed: name = undefined, price = undefined
  return <div>{name} — £{price.toFixed(2)}</div>
  // 💥 TypeError if price is undefined
}

// ✓ Always pass required props:
<MenuCard name="Espresso" price={2.50} />
💡children is just another prop
`children` is a built-in prop that React automatically populates with whatever is between the component's opening and closing tags. It enables wrapper/layout components — write the shell once, pass the content as children.

Live Props Playground

Change prop values and see the component and JSX update instantly:

props-playground.jsx
Props
JSX
<Button label="Order Now" variant="primary" />
ℹ️Prop naming conventions
By convention, boolean props start with is/has/show: `isLoading`, `hasError`, `showBadge`. Callback props start with on: `onClick`, `onOrder`, `onChange`. These conventions make components self-documenting.

Your Challenge

Write a Menu component that receives items (array of objects) and onOrder (function) as props. Map over items to render a MenuCard for each. Pass onOrder down to each MenuCard which calls it with the item object when its button is clicked. Use spread: <MenuCard {...item} onOrder={onOrder} />.

Challenge

Write a Menu component that receives an items array as a prop and renders a MenuCard for each one. Add an onOrder callback prop to MenuCard that the parent wires to an addToCart function. Use the spread operator to pass item objects directly.

propsdefault-propschildren-propcallback-propsprop-spreaddestructuringread-onlyone-way-data-flowprop-types
Props | Nexus Learn