Component Props and Read-Only Data Flow

Beginner12 min read•Updated: Jul 11, 2026

Component Props and Read-Only Data Flow

1. What Are Props?

In React, props (short for "properties") are the mechanism by which components communicate with each other. Just as HTML elements accept attributes to customize their behavior (<a href="https://example.com">), React components accept props passed down from parent components.

Props can be any valid JavaScript value: strings, numbers, booleans, objects, arrays, functions (callbacks), or even other React elements.

JSX

1// Parent component passing props
2function Dashboard() {
return (
  <div className="dashboard-grid">
    <UserCard
      name="Ananya Roy"
      role="Frontend Architect"
      yearsExperience={6}
      isActive={true}
    />
  </div>
);
13}
14 
15// Child component receiving props object
16function UserCard(props) {
return (
  <div className="card">
    <h3>{props.name}</h3>
    <p>Role: {props.role}</p>
    <p>Experience: {props.yearsExperience} years</p>
    <span className={props.isActive ? 'badge-green' : 'badge-gray'}>
      {props.isActive ? 'Active' : 'Offline'}
    </span>
  </div>
);
27}

2. Unidirectional Top-Down Data Flow

React enforces strict unidirectional (one-way) data binding:

Data flows strictly from parent components down to child components.
A child component has no built-in way to directly mutate or reassign the props given to it by its parent.
If a child needs to inform the parent of an event or change, the parent passes a callback function down as a prop, which the child invokes.

Output

1Parent Component (Source of Truth: state = "dark")
2         │
3         ▼ (passes prop theme="dark")
4Child Component (Renders UI based on theme prop)

3. Props are Read-Only (Immutable)

A cardinal rule in React engineering is: Components must never mutate their own props.

In JavaScript terms, props are treated as frozen, read-only values:

JSX

1// ❌ Anti-pattern: Modifying props directly is forbidden!
2function Profile(props) {
3  props.name = props.name.toUpperCase(); // Mutates prop object!
4  props.viewCount += 1;                  // Mutates prop object!
5 
6  return <div>{props.name} ({props.viewCount})</div>;
7}
8 
9// ✅ Correct Pattern: Derive new values or declare local variables
10function Profile(props) {
11  const formattedName = props.name.toUpperCase();
12  const nextCount = props.viewCount + 1;
13 
14  return <div>{formattedName} ({nextCount})</div>;
15}

If React permitted components to modify incoming props, child components could unexpectedly corrupt parent data structures, creating chaotic debugging nightmares across large applications.

4. Passing Non-String Props

Remember to enclose non-string values (numbers, booleans, objects, arrays) in curly braces:

JSX

1// Strings can use regular quotes
2<Badge text="Pro Member" />
3 
4// Numbers, booleans, objects, and arrays MUST use curly braces
5<Badge count={42} isVerified={true} settings={{ theme: 'dark' }} tags={['js', 'react']} />

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

What are props in React?

Question 2

Why is mutating a prop directly inside a child component forbidden in React?

Question 3

How should a child component inform its parent that a user clicked a button?

Question 4

Which prop assignment passes the number 25 as an actual JavaScript numeric type?

Question 5

What data types can be passed as props in React?

Next Lesson

Destructuring Props and Default Prop Values

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Functional Components and Declarative UI	Destructuring Props and Default Prop Values

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext