Props passing in React Native - UI Render Trace

Component - Props passing

This React Native component example shows how to pass data from a parent component to a child component using props. Props are like parameters you give to a child so it can display or use that data.

Widget Tree

App
├─ View (container)
│  ├─ Text (title)
│  └─ Greeting (child component)
│     └─ Text (message)

The main App component contains a View that holds a Text component for the title and a Greeting component. The Greeting component receives a name prop and renders a Text component showing a greeting message.

Render Trace - 5 Steps

Step 1: App

Step 2: View

Step 3: Text (title)

Step 4: Greeting

Step 5: Text (message)

State Change - Re-render

Trigger:Changing the name prop passed to Greeting from 'Alice' to 'Bob'

Before

Greeting component shows 'Hello, Alice!'

→

After

Greeting component shows 'Hello, Bob!'

Re-renders:Greeting component and its Text child re-render to update the displayed name

UI Quiz - 3 Questions

What does the Greeting component receive from its parent?

A A state variable called name

B A function to change the name

C A prop called name with a string value

D No data is passed to Greeting

Key Insight

Passing props is a simple way to send data from a parent to a child component in React Native. It helps keep components reusable and focused on displaying data they receive, like giving a friend a note with instructions.

Practice

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

easy

A. To style components with CSS

B. To store internal state of a component

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

D. To handle user input events

Solution

1. Step 1: Understand the role of props

   Props are used to send data from a parent component down to its children, allowing dynamic content.

2. Step 2: Differentiate props from state and styling

   State holds internal data, styling is separate, and event handling is done via callbacks, not props alone.

3. Final Answer:

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

4. Quick Check:

   Props = Data passing from parent to child [OK]

Hint: Props always flow from parent to child components [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle styling
• Assuming props manage events directly

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

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize JSX prop syntax

   Props with string values must be passed inside quotes like title="Hello".

2. Step 2: Identify incorrect syntax

   Using curly braces without quotes expects a variable, missing quotes or equals sign is invalid.

3. Final Answer:

   <Greeting title="Hello" /> -> Option A

4. Quick Check:

   String props need quotes in JSX [OK]

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

Common Mistakes:

• Omitting quotes around string values
• Using curly braces for plain strings
• Missing equals sign between prop and value

3. What will be displayed on the screen when this code runs?

function Welcome(props) {
  return {props.message};
}

export default function App() {
  return ;
}

medium

A. props.message

B. Error: message not defined

C. Welcome

D. Hi there!

Solution

1. Step 1: Identify prop usage in Welcome component

   The Welcome component receives message prop and displays it inside Text.

2. Step 2: Check what prop value is passed

   The App component passes message="Hi there!" to Welcome.

3. Final Answer:

   Hi there! -> Option D

4. Quick Check:

   Props value shown in child component [OK]

Hint: Props values appear where used inside child components [OK]

Common Mistakes:

• Printing the prop name instead of its value
• Expecting component name to display
• Assuming missing prop causes error

4. Identify the error in this code snippet:

function Button(props) {
  return {props.label};
}

export default function App() {
  return ;
}

medium

A. Missing quotes around string prop value

B. Incorrect component name

C. Text component cannot display props

D. Props cannot be passed to functional components

Solution

1. Step 1: Check prop syntax in App component

   The prop label is passed as label=ClickMe without quotes, which is invalid for strings.

2. Step 2: Understand correct JSX prop passing

   String values must be in quotes like label="ClickMe" or in curly braces if variable.

3. Final Answer:

   Missing quotes around string prop value -> Option A

4. Quick Check:

   String props need quotes in JSX [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Forgetting quotes around string props
• Thinking props can't be passed to functions
• Misunderstanding Text component usage

5. You want to create a reusable Profile component that shows a user's name and age. Which of these is the best way to pass props to make it flexible?

hard

A.

B.

C.

D.

Solution

1. Step 1: Check prop value types and syntax

   Strings like name should be in quotes; numbers like age should be passed as JavaScript expressions using curly braces.

2. Step 2: Evaluate each option

   <Profile name="Alice" age={30} /> correctly passes name as string and age as number. <Profile name={"Alice"} age="30" /> passes age as string which is less ideal. <Profile name=Alice age=30 /> misses quotes and braces. <Profile name={Alice} age={30} /> uses undefined variable Alice.

3. Final Answer:

   <Profile name="Alice" age={30} /> -> Option B

4. Quick Check:

   Strings in quotes, numbers in braces [OK]

Hint: Use quotes for strings, braces for numbers in props [OK]

Common Mistakes:

• Passing numbers as strings
• Omitting quotes for strings
• Using undefined variables without quotes