Components and Props

Components would be useless if every instance looked identical. Props (short for "properties") are how a parent component passes data down into a child, the same way arguments pass data into a function — because that's exactly what they are.

Props are just parameters

A component is a function, and props are its one argument — a plain JavaScript object:

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}
 
<Greeting name="Priya" />
<Greeting name="Marcus" />

Each <Greeting ... /> call creates a new element with a different props object. Almost always, you'll destructure right in the parameter list instead of writing props.name repeatedly:

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

Props are read-only

A component must never modify the props it receives. This isn't a style preference — React's whole model of "the UI is a function of data" assumes that data flows one direction, parent to child. If a child could freely rewrite its own props, a parent re-rendering with a different value could be silently overwritten by a stale one, and there would be no reliable way to reason about where a piece of data actually came from.

// Don't do this
function Badge({ color }) {
  color = "red"; // reassigning a parameter you were handed
  return <span className={color}>Status</span>;
}

If a component needs its own value that changes over time, that's what state is for — the next part of this course.

Defaults and renaming

Destructuring in the parameter list supports the same defaults and renaming you'd use anywhere else in JavaScript:

function Button({ label = "Click me", onClick, variant: kind = "primary" }) {
  return (
    <button className={`btn btn-${kind}`} onClick={onClick}>
      {label}
    </button>
  );
}

label defaults to "Click me" if not passed (or passed as undefined), and the incoming variant prop is renamed to the local variable kind.

Composing components

A component can render other components exactly like it renders built-in tags — pass them props the same way:

function Avatar({ src, alt }) {
  return <img className="avatar" src={src} alt={alt} />;
}
 
function UserCard({ user }) {
  return (
    <div className="card">
      <Avatar src={user.avatarUrl} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.title}</p>
    </div>
  );
}

UserCard doesn't know or care how Avatar renders an image — it just uses it, the same way it uses the built-in div and h3. That's composition: building bigger pieces out of smaller, independently understandable ones.

The children prop

Whatever you put between a component's opening and closing tags becomes a special prop called children:

function Card({ children }) {
  return <div className="card">{children}</div>;
}
 
<Card>
  <h2>Title</h2>
  <p>Some body text.</p>
</Card>

Card doesn't need to know what's inside it — it just provides a wrapper and renders whatever was handed to it. This is what makes components like modal dialogs, panels, and layout wrappers reusable for wildly different content; you'll build on this pattern properly in the composition lesson later in this course.

Try it yourself

A small component tree: App passes different props to two Greetings, and one Card wraps arbitrary children.

What to remember

• Props are a component's inputs — read-only, passed down from a parent, exactly like function arguments.
• Destructure props in the parameter list; use = for defaults and : to rename.
• Components compose: a component can render other components and pass them props.
• children is whatever was placed between a component's opening and closing tags — the basis for wrapper/layout components.