Components and props — React's secret handshake

"Components are the LEGO bricks; props are the little stickers you put on them so each brick behaves like a pirate ship or a fairy castle."

You're already comfortable with React's project setup and the basics of JSX syntax from earlier in the course. You also recently crawled through the wonderful swamp of asynchronous JS, fetch, and JSON. Now it's time to combine those powers: build reusable frontend components and pass data between them with props.

---

What this lesson covers

• What a component is in React and why we break UIs into them
• What props are and why they're the lingua franca between components
• Practical patterns: destructuring props, children, callbacks, and default props
• How this connects to fetching data (hint: parent fetches, children render)

Why this matters: components + props = scalable UIs. You'll stop copying markup like a nervous intern and start composing pieces like a chef building a tasting menu.

---

Components: tiny apps inside your app

A component is a JavaScript function (or class) that returns JSX. It's a self-contained piece of UI with its own input (props) and output (rendered UI). Think of components as:

• Reusable: write once, use many times
• Composable: nest them to build complex UIs
• Declarative: describe what you want to see, not how to mutate the DOM

Micro explanation

• Functional component: the modern, preferred approach

Example:

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

// Usage
<Greeting name='Ada' />

This tiny component takes a name prop and renders a greeting.

---

Props: the inputs that make components flexible

Props (short for properties) are the data you pass from a parent component into a child component. They are read-only from the child's perspective.

Think of parent -> child as handing a boxed lunch to someone else. You choose what's inside; they can eat it but not repackage it into two lunches.

Key properties of props

• Immutable inside the child (you shouldn't mutate them)
• Passed down from parent to child via JSX attributes
• Can be any JavaScript value: string, number, array, object, function

Example with different types:

<Item
  id={42}
  title='Reactive Salad'
  tags={['leafy', 'green']}
  onClick={() => console.log('ate the salad')}
/>

---

Useful patterns

1) Destructuring props

function Item({ title, tags, onClick }) {
  return (
    <div onClick={onClick}>
      <h3>{title}</h3>
      <small>{tags.join(', ')}</small>
    </div>
  );
}

Cleaner and easier to read than props.title everywhere.

2) children prop — put stuff between tags

When you write <Card>Hi!</Card>, "Hi!" becomes props.children:

function Card({ children }) {
  return <section className='card'>{children}</section>;
}

<Card>
  <h2>Title</h2>
  <p>Body</p>
</Card>

This is great for wrappers and layout.

3) Callbacks: child -> parent communication

Props can be functions. This is how a child notifies the parent about events.

function TodoItem({ todo, onToggle }) {
  return (
    <li>
      <label>
        <input
          type='checkbox'
          checked={todo.done}
          onChange={() => onToggle(todo.id)}
        />
        {todo.text}
      </label>
    </li>
  );
}

Parent supplies onToggle that updates state (lifting state up). This is the canonical pattern for controlled interactions.

4) Default props and prop validation

You can set defaults or use TypeScript/PropTypes to validate types. In modern functional components, often use default parameter values:

function Button({ label = 'Click me', onClick = () => {} }) {
  return <button onClick={onClick}>{label}</button>;
}

---

Composition vs. inheritance (spoiler: composition wins)

React prefers composing components over inheriting behavior. Build small components and assemble them. It keeps code predictable and testable.

Imagine composing a Header, PostList, and Footer rather than making a single massive BlogApp class with 3,000 lines of spaghetti.

---

Real-world flow: fetching data + passing props

You learned how to fetch JSON with fetch earlier. Here's a common pattern:

• Parent component fetches data asynchronously
• Parent stores the data in state
• Parent maps over data and passes each item as props to child components

Example:

function App() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    fetch('/api/posts')
      .then(res => res.json())
      .then(setPosts);
  }, []);

  return (
    <div>
      {posts.map(post => (
        <PostItem key={post.id} post={post} />
      ))}
    </div>
  );
}

function PostItem({ post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </article>
  );
}

This is the natural progression from "I can fetch data" to "I show it through components." The parent owns fetching and state; the child focuses on presentation.

---

Why do people keep misunderstanding this?

• They try to mutate props inside children (bad idea — break the mental model)
• They put async logic directly in every child instead of centralizing fetching (leads to duplicated requests)
• They build massive components instead of tiny, testable ones

Imagine a team where everyone edits the DOM directly. Chaos. React's component/props model prevents that.

"This is the moment where the concept finally clicks: data flows top-down, events bubble up via callbacks."

---

Quick cheatsheet

• Components: functions that return JSX
• Props: read-only inputs from parent to child
• children: special prop for nested content
• Callbacks via props let children tell parents about events
• Fetch in parents, render in children

Final memorable insight

Build small components. Pass in only what they need. Keep data fetching near the top so children remain simple and predictable. Your future self (and teammates) will hug you.

---

Key takeaways

• Use props to make components reusable and composable
• Destructure props for clarity, use children for nested UI
• Pass callbacks to allow children to trigger state changes in parents
• Combine what you learned about fetch/JSON: parent fetches data → parent passes it down as props → children render

Go refactor that big component you made in the last assignment. Split it up, pass only the props each piece needs, and imagine the clean, maintainable app you will build. You are now two steps closer to becoming a React wizard — with better code hygiene and fewer console.warns.