Props passing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named title with value 'Hello' to the Greeting component.

React Native

function App() {
  return <Greeting [1] />;
}

function Greeting(props) {
  return <Text>{props.title}</Text>;
}

Drag options to blanks, or click blank then click option'

Atitle='Hello'

Btext='Hello'

Cmessage='Hello'

Dname='Hello'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than expected inside the component.

Forgetting to pass the prop at all.

The prop name must match the one used inside the component. Here, title is the correct prop name.

2fill in blank

medium

Complete the code to access the name prop inside the User component.

React Native

function User([1]) {
  return <Text>Welcome, {name}!</Text>;
}

Drag options to blanks, or click blank then click option'

A{name}

Bprops

Cname

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using props but then trying to use name without props.name.

Using curly braces inside the parameter list incorrectly.

Using destructuring, you can directly extract name from props by writing function User({name}).

3fill in blank

hard

Fix the error in the code by completing the prop usage correctly.

React Native

function Message(props) {
  return <Text>{props.[1]</Text>;
}

// Usage
<Message text="Hi!" />

Drag options to blanks, or click blank then click option'

Acontent

Bmessage

Ctitle

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name inside the component than the one passed.

Forgetting to use props. before the prop name.

The prop passed is named text, so inside the component you must use props.text to access it.

4fill in blank

hard

Fill both blanks to pass two props firstName and lastName to the UserCard component.

React Native

function App() {
  return <UserCard [1] [2] />;
}

function UserCard({ firstName, lastName }) {
  return <Text>{firstName} {lastName}</Text>;
}

Drag options to blanks, or click blank then click option'

AfirstName='John'

Bname='John'

ClastName='Doe'

Dsurname='Doe'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names like name or surname.

Passing props without values.

Props must match the names expected by the component: firstName and lastName.

5fill in blank

hard

Fill all three blanks to create a Profile component that receives username, age, and isMember props and displays them.

React Native

function Profile({ [1], [2], [3] }) {
  return (
    <View>
      <Text>Username: {username}</Text>
      <Text>Age: {age}</Text>
      <Text>Member: {isMember ? 'Yes' : 'No'}</Text>
    </View>
  );
}

function App() {
  return <Profile username="alice" age={30} isMember={true} />;
}

Drag options to blanks, or click blank then click option'

Ausername

Bage

CisMember

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong or incomplete prop names in destructuring.

Forgetting commas between prop names.

The component destructures the props by their exact names: username, age, and isMember.

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