Components & Props

Props are how data flows into a component from its parent, making components reusable and composable. Getting comfortable passing, reading, and typing props is the foundation for everything you build with React.

Passing Props

Props are passed to a component the same way you pass attributes to an HTML tag: `<Greeting name="Sam" />`. Inside the component, all the props arrive bundled into a single object, conventionally named `props`, so `name` is read as `props.name`.

Props flow in one direction only - from parent to child. A child component cannot modify the props it receives; it can only read them.

Try it yourself

Passing and reading a prop

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

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

render(<App />);

Output

Hello, Sam!

Destructuring Props

Rather than writing `props.name` everywhere, it is common to destructure props right in the function signature: `function Greeting({ name }) { ... }`. This reads more cleanly and makes it obvious at a glance which props a component expects.

Try it yourself

function UserCard({ name, role }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: 12, borderRadius: 8 }}>
      <strong>{name}</strong>
      <div style={{ color: '#666' }}>{role}</div>
    </div>
  );
}

render(<UserCard name="Priya" role="Engineer" />);

Output

Priya

Engineer

children as a Special Prop

Whatever you nest between a component's opening and closing tags is automatically passed as `props.children`. This is how wrapper/layout components work - a `Card` component can render `props.children` inside its own markup, letting the caller decide what actually goes inside.

Try it yourself

A reusable Card wrapper using children

function Card({ children }) {
  return (
    <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: 16 }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h3>Inside a card</h3>
      <p>Any JSX passed as children renders here.</p>
    </Card>
  );
}

render(<App />);

Output

Inside a card

Any JSX passed as children renders here.

Default Props and Prop Types

You can give a destructured prop a default value the same way you would a function parameter: `function Greeting({ name = "Guest" }) { ... }`. In a TypeScript codebase (which this course assumes going forward), you typically define an interface for a component's props and annotate the function accordingly, which gives you compile-time checking instead of relying on runtime prop-types validation.

Composition Over Configuration

A common React instinct coming from other UI approaches is to add more and more props to a single component to handle every case. Often a cleaner solution is composition - building small, focused components and combining them via `children` or by passing components as props, rather than one component with a dozen boolean flags.

Coding challenge

Create a Badge component that accepts label and color props and renders a small colored pill showing the label. Render two Badge components with different labels and colors.

function Badge({ label, color }) {
  // write your code here
  return null;
}

function App() {
  return (
    <div>
      {/* render two Badge components here */}
    </div>
  );
}

render(<App />);

Output

Answer every question below to mark this chapter as complete.

Quiz Yourself

Score: 0/4

1. Which direction do props flow in React?

2. What does `props.children` represent?

3. Can a component reassign or mutate a prop it receives?

4. What is a common alternative to giving one component many configuration props?