Props passing in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will be displayed by this component?

Consider this React Native component that receives a prop called name. What text will it show on the screen?

React Native

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

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

A Error: props is undefined

B Hello, props.name!

C Hello, Alice!

D Hello, !

💡 Hint

Props are used to pass data from parent to child components.

The component uses props.name to show the passed value 'Alice'. So it displays 'Hello, Alice!'.

📝 Syntax

intermediate

Which option correctly passes multiple props?

You want to pass two props, title and count, to a component. Which usage is correct?

React Native

function Info(props) {
  return <Text>{props.title}: {props.count}</Text>;
}

A <Info title="Messages" count={5} />

B <Info title="Messages" count=5 />

C <Info title={"Messages"} count="5" />

D <Info title=Messages count=5 />

💡 Hint

Use curly braces for numbers and quotes for strings in JSX props.

Option A correctly passes a string prop with quotes and a number prop with curly braces.

❓ lifecycle

advanced

What happens if a prop changes in a functional component?

If a parent component passes a prop color to a child functional component, what happens when color changes?

A The child component re-renders with the new prop value.

B The child component ignores the change and keeps old value.

C The child component unmounts and remounts.

D The app crashes with an error.

💡 Hint

React updates components when props change to keep UI in sync.

React re-renders child components when their props change to update the UI accordingly.

🔧 Debug

advanced

Why does this component show 'undefined' for a prop?

This component tries to show props.message but displays 'undefined'. What is the likely cause?

React Native

function ShowMessage(props) {
  return <Text>{message}</Text>;
}

// Usage:
<ShowMessage message="Hi!" />

A The component must use state to show props.

B The prop 'message' was not passed from parent.

C React Native Text component cannot display props.

D The component uses 'message' instead of 'props.message'.

💡 Hint

Inside the component, you must access props with 'props.' prefix.

The code uses 'message' directly, which is undefined. It should use 'props.message' to access the prop.

🧠 Conceptual

expert

What is the main benefit of passing props in React Native?

Why do React Native components use props to receive data instead of using global variables?

A Props automatically update the database with new values.

B Props make components reusable and predictable by passing data explicitly.

C Props allow components to change global variables directly.

D Props prevent components from rendering multiple times.

💡 Hint

Think about how data flows in React apps and why explicit data passing is helpful.

Props let components receive data clearly from parents, making them reusable and easier to understand.