Props as read-only data in React - Step-by-Step Execution

Concept Flow - Props as read-only data

Parent Component

↓

Pass Props to Child

↓

Child Component Receives Props

↓

Child Uses Props to Render

↓

Child Cannot Modify Props

↓

If Child Needs Change -> Use State or Callbacks

Props flow from parent to child as fixed data. Child can read but not change props directly.

Execution Sample

React

function Child({ message }) {
  // message is read-only
  return <p>{message}</p>;
}

function Parent() {
  return <Child message="Hello!" />;
}

Parent sends a message prop to Child, which displays it without changing it.

Execution Table

Step	Component	Props Received	Action	Output Rendered
1	Parent	none	Renders Child with message='Hello!'	Child element created with prop message='Hello!'
2	Child	message='Hello!'	Reads message prop	<p>Hello!</p> rendered
3	Child	message='Hello!'	Attempts to modify props (not allowed)	No change, props remain 'Hello!'
4	Parent	none	No change in props	Output remains <p>Hello!</p>

💡 Props are read-only; child cannot modify them, so rendering stays consistent.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
message	undefined	'Hello!'	'Hello!'	'Hello!'	'Hello!'

Key Moments - 2 Insights

Why can't the Child component change the value of props?

Props are passed from Parent as fixed data. The Child only reads them (see execution_table step 3). Changing props inside Child breaks React's data flow rules.

If the Child needs to change displayed data, what should it do?

Child should use its own state or ask Parent to change props via callbacks. Props themselves stay unchanged (see concept_flow last step).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'message' prop when Child tries to modify it?

A 'Hello!'

B undefined

C null

D 'Changed!'

💡 Hint

Check execution_table row 3 under 'Props Received' and 'Output Rendered'

At which step does the Parent pass props to the Child?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at execution_table step 1 where Parent renders Child with props

If Child tries to change props, what happens to the rendered output?

A Output changes to new value

B App crashes

C Output remains the same

D Parent re-renders automatically

💡 Hint

See execution_table step 3 and 4 where props remain unchanged and output stays

Hello!

Concept Snapshot

Props are data passed from parent to child components.
Child components receive props as read-only.
Child cannot modify props directly.
To change data, child uses state or callbacks.
Props flow down; state flows inside component.
This keeps UI predictable and easy to debug.

Full Transcript

In React, props are like messages sent from a parent component to a child component. The child can read these messages but cannot change them. This keeps the data flow clear and predictable. When the parent renders the child, it passes props as fixed data. The child uses these props to display content but if it tries to change them, React ignores that because props are read-only. If the child needs to change something, it should use its own state or ask the parent to update props through callbacks. This way, the UI stays consistent and easy to understand.

Practice

1. In React, what does it mean that props are read-only?

easy

A. You cannot change props inside the child component.

B. You can modify props directly in the child component.

C. props are only used for styling components.

D. props are used to store component state.

Solution

1. Step 1: Understand the role of props

   Props are data passed from a parent component to a child component in React.

2. Step 2: Recognize props immutability

   Props are read-only, meaning the child component cannot change them directly.

3. Final Answer:

   You cannot change props inside the child component. -> Option A

4. Quick Check:

   Props are read-only = D [OK]

Hint: Remember: props come from parent, child can't change them [OK]

Common Mistakes:

• Trying to modify props directly inside child component
• Confusing props with state
• Thinking props are for styling only

2. Which of the following is the correct way to access a prop named title inside a functional component?

easy

A. const title = this.props.title;

B. const title = getProps.title;

C. const title = state.title;

D. const title = props.title;

Solution

1. Step 1: Identify functional component syntax

   In functional components, props are passed as a parameter named props.

2. Step 2: Access prop correctly

   You access a prop by props.title. Using this.props is for class components.

3. Final Answer:

   const title = props.title; -> Option D

4. Quick Check:

   Functional component props access = B [OK]

Hint: Use props.parameterName inside functional components [OK]

Common Mistakes:

• Using this.props in functional components
• Confusing state with props
• Trying to use undefined variables like getProps

3. What will be the output of this React component?

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

// Usage: <Greeting name="Bob" />

medium

A. Hello, Bob!

B. Hello, Alice!

C. Error: Cannot assign to props.name

D. Hello, undefined!

Solution

1. Step 1: Understand props mutability

   Although props are read-only and mutating them is an anti-pattern, JavaScript allows changing the object property within the component function.

2. Step 2: Determine rendered output

   The assignment props.name = "Alice" mutates the value before the return, so the output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Props mutation affects render output = B [OK]

Hint: Mutating props technically works but violates React's read-only principle [OK]

Common Mistakes:

• Thinking props mutation doesn't affect output
• Expecting an error from assignment
• Confusing props with state

4. Identify the error in this React functional component:

function Counter(props) {
  props.count = props.count + 1;
  return <div>Count: {props.count}</div>;
}

medium

A. Props are being mutated directly, which is not allowed.

B. The component should use this.state instead of props.

C. The return statement is missing parentheses.

D. The component should not return JSX.

Solution

1. Step 1: Check for props mutation

   The line props.count = props.count + 1; tries to change props directly, which is not allowed.

2. Step 2: Understand correct data handling

   Props are read-only; to change data, use state or callbacks, not direct mutation.

3. Final Answer:

   Props are being mutated directly, which is not allowed. -> Option A

4. Quick Check:

   Direct props mutation = error = A [OK]

Hint: Never assign to props; use state for changes [OK]

Common Mistakes:

• Trying to mutate props directly
• Confusing props with state usage
• Ignoring React's immutability rules

5. You want to create a component that shows a user's name and allows updating it inside the component. Which approach correctly respects that props are read-only?

hard

A. Modify the props.name directly inside the component to update the name.

B. Use a global variable to store the name and ignore props.

C. Copy props.name to a state variable and update the state to change the name.

D. Pass a new name prop from the child component to the parent.

Solution

1. Step 1: Understand props immutability

   Props cannot be changed inside the component; they are read-only.

2. Step 2: Use state for data that changes

   Copy the prop value to a state variable, then update the state to reflect changes.

3. Final Answer:

   Copy props.name to a state variable and update the state to change the name. -> Option C

4. Quick Check:

   Use state to update data, not props = C [OK]

Hint: Use state for changes, keep props read-only [OK]

Common Mistakes:

• Trying to change props directly
• Using global variables instead of state
• Passing props from child to parent (not possible)