Passing props to components in React - Step-by-Step Execution

Concept Flow - Passing props to components

Parent Component

↓

Define props values

↓

Render Child Component with props

↓

Child Component receives props

↓

Child uses props to render output

The parent component defines values and passes them as props to the child component, which then uses these props to display content.

Execution Sample

React

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

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

This code passes the name 'Alice' as a prop to the Greeting component, which displays a personalized message.

Execution Table

Step	Action	Props Passed	Child Output
1	App renders Greeting	name: 'Alice'	Hello, Alice!
2	Greeting receives props	name: 'Alice'	Hello, Alice!
3	Greeting returns JSX	name: 'Alice'	<h1>Hello, Alice!</h1>
4	React renders output to DOM	name: 'Alice'	Visible: Hello, Alice!

💡 Rendering completes after Greeting returns JSX and React updates the DOM.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
props.name	undefined	Alice	Alice	Alice

Key Moments - 2 Insights

Why does Greeting receive props with the name 'Alice'?

Because in step 1, App passes the prop name='Alice' when rendering Greeting, as shown in the execution_table row 1.

What happens if we don't pass a prop to Greeting?

Greeting.props.name would be undefined, so the output would show 'Hello, !' as no name is provided, similar to the initial 'Start' state in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table at step 2, what is the value of props.name inside Greeting?

A "Alice"

B undefined

C null

D "Greeting"

💡 Hint

Check the 'Props Passed' column at step 2 in the execution_table.

At which step does React update the DOM with the greeting message?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look for the step where the output becomes visible in the execution_table.

If App passed name="Bob" instead of "Alice", what would props.name be at step 2?

A undefined

B "Alice"

C "Bob"

D null

💡 Hint

Refer to how props are passed from App to Greeting in the execution_table step 1.

Concept Snapshot

Passing props to components:
- Parent sends data as props: <Child propName="value" />
- Child receives props as function argument
- Use props inside child: props.propName
- Props are read-only inside child
- Enables reusable, dynamic components

Full Transcript

In React, components can receive data from their parent components through props. The parent component includes the child component in its JSX and passes values as attributes. These values become properties (props) accessible inside the child component as an object. The child uses these props to render dynamic content. For example, a Greeting component can receive a name prop and display a personalized message. The execution flow starts with the parent rendering the child with props, the child receiving and using the props, and finally React rendering the output to the screen. Props are immutable inside the child, meaning the child should not change them. This pattern helps build reusable and flexible components.

Practice

1. What is the main purpose of props in React components?

easy

A. To handle user events like clicks

B. To store local state inside a component

C. To pass data from a parent component to a child component

D. To style components with CSS

Solution

1. Step 1: Understand the role of props

   Props are used to send data from one component to another, specifically from parent to child.

2. Step 2: Differentiate props from other React features

   State stores local data, events handle interactions, and CSS styles components, but props specifically pass data down.

3. Final Answer:

   To pass data from a parent component to a child component -> Option C

4. Quick Check:

   Props = data passing [OK]

Hint: Props always send data down from parent to child [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle events
• Believing props style components

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a component Header?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed like HTML attributes: name="value" or name={expression}.

2. Step 2: Check each option

   uses correct string syntax.

   misses quotes around string.

   uses invalid quotes.

   uses colon which is invalid in JSX.

3. Final Answer:

   <Header title="Hello" /> -> Option B

4. Quick Check:

   Props look like HTML attributes [OK]

Hint: Use quotes for string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string values
• Using colons instead of equals
• Adding extra quotes around prop names

3. What will be rendered by this React component?

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

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

medium

A. Hello, Alice!

B. Hello, {props.name}!

C. Hello, name!

D. Error: props is undefined

Solution

1. Step 1: Understand how props are used inside the component

   The component receives props and accesses props.name to display the name.

2. Step 2: Check the usage of the component

   The component is called with name="Alice", so props.name is "Alice".

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values replace placeholders inside JSX [OK]

Common Mistakes:

• Printing literal {props.name} instead of value
• Forgetting to pass the prop
• Assuming props is undefined

4. Identify the error in this code snippet:

function Welcome(props) {
  return <h2>Welcome, {props.user}!</h2>;
}

// Usage:
<Welcome user=John />

medium

A. Missing quotes around string prop value 'John'

B. Props object is not passed correctly

C. Component name should be lowercase

D. JSX tags are not closed properly

Solution

1. Step 1: Check the prop usage in JSX

   In JSX, string prop values must be quoted, e.g., user="John".

2. Step 2: Identify the error in usage

   The code uses user=John without quotes, causing a syntax error.

3. Final Answer:

   Missing quotes around string prop value 'John' -> Option A

4. Quick Check:

   String props need quotes [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string props
• Using lowercase component names
• Leaving JSX tags unclosed

5. Given this parent and child component code, what will be the output?

function Child({ message }) {
  return <p>Message: {message || 'No message'}</p>;
}

function Parent() {
  const msg = '';
  return <Child message={msg} />;
}

hard

A. Message:

B. Error: message prop missing

C. Message: undefined

D. Message: No message

Solution

1. Step 1: Analyze the prop value passed

   The parent passes msg which is an empty string '' as the message prop.

2. Step 2: Understand the child component's rendering logic

   The child uses {message || 'No message'}. Since empty string is falsy, it falls back to 'No message'.

3. Final Answer:

   <p>Message: No message</p> -> Option D

4. Quick Check:

   Falsy empty string triggers fallback [OK]

Hint: Falsy props like '' use fallback values in JSX [OK]

Common Mistakes:

• Assuming empty string is truthy
• Expecting empty string to display as is
• Thinking missing prop causes error here