Components and Props

Course 1 · Ch 2

Making components reusable by passing data into them from outside

Chapter 1's Footer component was useful, but completely static — every instance of it renders the exact same text. Props (short for "properties") are how a parent component passes data into a child component, the same way a function takes arguments. This is what turns a one-off component into something genuinely reusable.

Passing Props from a Parent

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

function App() {
  return (
    <div>
      <Greeting name="Philip" />
      <Greeting name="Sam" />
    </div>
  );
}

Attributes written on a component tag — name="Philip" — become a single props object passed as the function's first parameter. Greeting reads props.name to render different text each time it's used, without needing to be rewritten. The two <Greeting /> elements above render "Hello, Philip!" and "Hello, Sam!" from the exact same component definition.

Destructuring Props

// instead of writing props.name and props.age everywhere...
function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}

Writing { name, age } directly in the parameter list destructures the props object, pulling out name and age as standalone variables. This is the convention used in almost all real React code — it reads more clearly than repeating props. in front of every value, and makes it obvious at a glance exactly which props a component expects.

Passing Different Types of Data

function ProductCard({ title, price, inStock }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>${price}</p>
      <p>{inStock ? "In stock" : "Sold out"}</p>
    </div>
  );
}

// usage — curly braces pass real JS values, not strings
<ProductCard title="Keyboard" price={49.99} inStock={true} />

A string prop uses plain quotes (title="Keyboard"), but any other JavaScript value — numbers, booleans, arrays, objects, even other components — needs curly braces instead: price={49.99}, not price="49.99" (which would pass the string "49.99" rather than an actual number).

Default Prop Values

function Button({ label, color = "blue" }) {
  return <button style={{ background: color }}>{label}</button>;
}

// no color prop given — falls back to "blue"
<Button label="Save" />

Ordinary JavaScript default-parameter syntax works directly in a destructured props parameter: color = "blue" supplies a fallback whenever the caller doesn't pass that prop at all. Note the double curly braces in style={{ background: color }} — the outer pair is the JSX expression, the inner pair is a regular JS object literal for the style prop, which React expects as an object rather than a CSS string.

Props flow one way: parent → child

A child component can read the props it's given, but it can never reach back up and change them directly — props are read-only from the child's perspective. If a child needs to cause a change in the parent (e.g. a button click updating something), the parent passes a function down as a prop, which the child calls. That pattern shows up properly once state is introduced in Chapter 3.

Syntax	Passes...
name="Sam"	A string, "Sam"
age={28}	A number, 28
active={true}	A boolean, true
onClick={handleClick}	A function reference (not called yet)

Coding Challenges

Challenge 1

Create a MovieCard component that destructures title and year props, rendering them as "Title (Year)". Use it three times in App with three different movies.

📄 View solution

Challenge 2

Create a Badge component that accepts a text prop and a color prop with a default value of "gray". Render it once with a custom color and once without one, confirming the default applies.

📄 View solution

Challenge 3

Create a StatusLabel component that accepts a boolean isOnline prop and renders "Online" or "Offline" using a ternary, with the text color also changing based on the same prop.

📄 View solution

Chapter 2 Quick Reference

Props — data passed from a parent component into a child, like function arguments
Component tag attributes (name="Sam") become a single props object
Destructuring — function Comp({ a, b }) reads cleaner than props.a / props.b
String props use quotes; everything else uses curly braces for real JS values
Default values — { color = "blue" }, same as default function parameters
Props are read-only from the child's side — they flow one way, parent to child
Next chapter: state with useState — giving a component data it can change itself