ReviseAlgo Logo

Fundamentals

Props

Master React props, covering parameter passing, destructuring patterns, default configurations, children elements, and props immutability.

Last Updated: July 15, 2026 • 12 min read

1. Learning Objectives

In this lesson, you will learn how to pass data between React components. By the end of this topic, you will be able to:

  • Pass data from a parent component to a child component using Props.
  • Destructure props arguments inside component parameter declarations.
  • Configure default prop values to handle missing parameters.
  • Use the children prop to pass layout elements.
  • Explain the rule of immutability that governs component props.

2. Overview

Props (short for "properties") are read-only inputs passed from a parent component to a child component. In React, data flows in a single direction (unidirectional): from top to bottom (parent to child). Props are immutable; a component should never modify its own incoming props, but rather treat them as read-only configuration inputs.

3. Why This Topic Matters

Props make components dynamic and reusable:

  • Component Reuse: Without props, a `Button` component could only render a single, hardcoded label. Props allow you to pass different labels, click handlers, and styling variables to reuse the same component in different contexts.
  • Unidirectional Data Flow: Restricting children from directly modifying parent variables makes application state updates easier to trace and debug.

4. Real-World Analogy

Think of React props like **arguments passed to a function**:

  • Function Call: A calculator function `add(a, b)` calculates a result based on the arguments you pass in. You can call it with different values to get different results, but the function itself does not modify the inputs.
  • React Component: A component `Button(props)` behaves the same way. The parent passes properties (e.g. `label="Save"`, `color="blue"`), and the component renders the layout based on those inputs without modifying them directly.

5. Core Concepts

Below is a comparison of Props and State inside React components:

Feature Props (Properties) State (Local State)
Origin Passed down from the parent component. Declared and managed locally inside the component.
Mutability Immutable (read-only inside the child). Mutable (modified via updater functions like setState).
Triggers re-render Yes, when the parent passes new prop values. Yes, when local state variables update.

6. Syntax & API Reference

This example shows how props are passed and destructured in React:

7. Visual Diagram

This diagram displays how data flows from parent components down to child nodes using props:

8. Live Example — Full Working Code

Below is a complete, single-file HTML page showing how props, default values, and the `children` prop are used:

What just happened? We define the BorderCard component, which accepts a title prop and a special children prop. The children prop allows us to pass nested components (like UserProfile) inside the tags of BorderCard. When rendered, React places these nested components directly where {{children}} is declared.

9. Interactive Playground

Try It Yourself Challenges:

  1. Add a new prop named location to the UserProfile component, and display it under the role text.
  2. Modify BorderCard to accept a custom borderColor prop, replacing the hardcoded gray border color dynamically.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mutating props directly inside component Props are read-only. Modifying them violates the pure rendering rules of React and breaks change tracking. function Card(props) {
props.title = 'Hello';
return ...
}		 Pass updating actions (callbacks) from the parent as props to notify parent components of changes.
Passing numeric properties as strings Numeric values passed as strings cannot be used in math calculations. Numbers must be wrapped in curly braces. <Card age="30" /> <Card age={30} />

11. Best Practices

  • Keep props immutable: Treat props as read-only. Never modify the properties of the props object directly.
  • Use destructuring: Destructure props in the function signature (e.g. `function Card({ title, content })`) to make code cleaner and easier to read.
  • Define default values: Use default parameters in functional signatures (e.g. `theme = 'light'`) to prevent errors when props are missing.

12. Browser Compatibility/Requirements

Props use standard JavaScript object destructuring and defaults, which are supported by all modern web browsers.

13. Interview Questions

Q1: What does it mean that React props are immutable?

Answer: Immutability means that once props are received by a child component, they cannot be changed. The child component must treat props as read-only. If the data needs to change, the parent component must update its state and pass the new values down as new props, triggering a clean re-render cycle.

Q2: What is the special `children` prop in React, and how is it used?

Answer: The children prop is a special prop populated automatically by React. It contains any components or elements placed between the opening and closing tags of a parent component (e.g. `

Hello

`). It allows developers to create reusable layout wrappers that can render dynamic nested content.

14. Debugging Exercise

Identify the error in this component declaration that causes the counter to render as NaN:

View Solution

Diagnosis: The prop `count` is passed as a string (`"5"`). When the component evaluates `{count + 1}`, JavaScript performs string concatenation instead of addition, resulting in `"51"`. While this is a string, passing non-numeric values to components expecting math calculations can lead to bugs.

Fix: Pass numeric props using curly braces:

15. Practice Exercises

Exercise 1: Build a product catalog item view

Build a component named ProductRow that accepts name, price, and inStock status. Render a list item displaying these details, styling out-of-stock items in red.

16. Scenario-Based Challenge

The Multi-Level Dialog Modal Wrapper:

You are designing a modal dialog component. The modal should support custom layouts (e.g. form inputs, warnings, confirmation buttons). Describe how you would use the children prop and additional action callback props to make this modal reusable across your entire application.

17. Quick Quiz

Q1: Which prop name is automatically populated by React with nested elements?

A) nest

B) elements

C) children

Answer: C — React maps components nested between layout tags to the special 'children' prop.

18. Summary & Key Takeaways

  • Props pass read-only data from parent components to child components.
  • Data flows in a single direction (unidirectional) down the component tree.
  • Props are immutable and must not be modified directly by the child component.
  • The special children prop renders content nested inside the component tags.

19. Cheat Sheet

Props Syntax Purpose
<MyComp name="Bob" /> Passes a string property to the component.
<MyComp age={30} /> Passes a numeric value (or JavaScript expression) to the component.
function MyComp({ name }) Destructures specific properties directly in the function arguments.
---