Default props in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will be displayed when no props are passed?

Consider this React Native component with default props. What text will appear if the component is rendered without any props?

React Native

import React from 'react';
import { Text } from 'react-native';

const Greeting = ({ name }) => {
  return <Text>Hello, {name}!</Text>;
};

Greeting.defaultProps = {
  name: 'Friend'
};

export default Greeting;

A Component will crash

B Hello, !

C Hello, Friend!

D Hello, undefined!

💡 Hint

Look at the defaultProps object and see what value is set for name.

If no name prop is passed, React Native uses the defaultProps value 'Friend', so the text shows 'Hello, Friend!'.

📝 Syntax

intermediate

Identify the correct way to set default props in a functional component

Which option correctly sets default props for a React Native functional component named Button?

React Native

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ label }) => {
  return <TouchableOpacity><Text>{label}</Text></TouchableOpacity>;
};

A Button.defaultProps = function() { return { label: 'Click me' }; };

B Button.defaultProps = { label: 'Click me' };

C Button.defaultProps = ['Click me'];

D Button.defaultProps = label => 'Click me';

💡 Hint

defaultProps should be an object with keys matching prop names.

defaultProps must be an object where keys are prop names and values are default values. Option B follows this correctly.

❓ lifecycle

advanced

When are default props applied in React Native functional components?

At what point in the component lifecycle are default props applied to a React Native functional component?

A Before the component function runs, default props fill in missing props.

B After the component renders, default props replace undefined props.

C During the component unmount phase, default props are applied.

D Default props are never applied automatically; you must check manually.

💡 Hint

Think about when the component receives its props to use inside the function.

React applies defaultProps before calling the component function, so missing props have default values inside the function.

🔧 Debug

advanced

Why does this component show 'undefined' instead of the default prop?

This React Native component tries to use default props but shows 'undefined' when no prop is passed. Why?

React Native

import React from 'react';
import { Text } from 'react-native';

const Welcome = ({ user }) => {
  return <Text>Welcome, {user}!</Text>;
};

// Incorrect default props
Welcome.defaultProps = { user: 'Guest' };

export default Welcome;

A defaultProps must be an object, not a function. Using a function causes 'user' to be undefined.

B The prop 'user' is required and cannot have a default.

C The component forgot to import React, so defaultProps don't work.

D defaultProps only work with class components, not functional ones.

💡 Hint

Check the type assigned to defaultProps.

defaultProps must be an object. Assigning a function to defaultProps does not set default values, so 'user' remains undefined.

🧠 Conceptual

expert

How do default props interact with destructured parameters with default values?

Given this React Native component, what will be the output if rendered with no props?

React Native

import React from 'react';
import { Text } from 'react-native';

const Info = ({ message = 'Hello' }) => {
  return <Text>{message}</Text>;
};

Info.defaultProps = {
  message: 'Hi'
};

export default Info;

A Component crashes

B Hello

C undefined

D Hi

💡 Hint

defaultProps are applied to the props object before destructuring happens inside the component function.

React applies defaultProps before calling the component function, setting message to 'Hi'. The destructuring default 'Hello' is not used because message is already defined as 'Hi'.

Practice

1. What is the main purpose of default props in a React Native component?

easy

A. To provide fallback values when no props are passed

B. To force the user to always pass props

C. To style the component automatically

D. To make the component stateful

Solution

1. Step 1: Understand what happens when props are missing

   If a prop is not passed, the component might break or behave unexpectedly.

2. Step 2: Role of default props

   Default props provide a fallback value so the component still works smoothly without explicit props.

3. Final Answer:

   To provide fallback values when no props are passed -> Option A

4. Quick Check:

   Default props = fallback values [OK]

Hint: Default props fill missing values automatically [OK]

Common Mistakes:

• Thinking default props force prop passing
• Confusing default props with styling
• Assuming default props make components stateful

2. Which of the following is the correct way to set a default prop value in a React Native functional component?

easy

A. MyComponent.propTypes = { title: 'Hello' }

B. function MyComponent(props = { title: 'Hello' }) { ... }

C. function MyComponent({ title = 'Hello' }) { ... }

D. const MyComponent = (props) => { props.title = 'Hello' }

Solution

1. Step 1: Identify default prop syntax in function parameters

   Using destructuring with default values like { title = 'Hello' } is the modern and correct way.

2. Step 2: Check other options

   function MyComponent(props = { title: 'Hello' }) { ... } wrongly assigns default to whole props object, C uses propTypes which is for validation not defaults, D mutates props which is bad practice.

3. Final Answer:

   function MyComponent({ title = 'Hello' }) { ... } -> Option C

4. Quick Check:

   Destructure with default = correct syntax [OK]

Hint: Use destructuring with = for default props [OK]

Common Mistakes:

• Assigning default to entire props object
• Confusing propTypes with defaultProps
• Mutating props inside component

3. What will be displayed by this component if used as <Greeting /> without passing any props?

function Greeting({ name = 'Guest' }) {
  return Hello, {name}!;
}

medium

A. Hello, !

B. Hello, Guest!

C. Hello, undefined!

D. Error: name is required

Solution

1. Step 1: Check default prop value

   The parameter name has a default value 'Guest' if no prop is passed.

2. Step 2: Analyze component output

   Since no name prop is passed, it uses 'Guest' and renders 'Hello, Guest!'.

3. Final Answer:

   Hello, Guest! -> Option B

4. Quick Check:

   Default prop used = 'Guest' [OK]

Hint: Default prop shows when no prop passed [OK]

Common Mistakes:

• Expecting empty or undefined name
• Thinking component throws error without prop
• Ignoring default parameter syntax

4. Identify the error in this component that tries to set default props:

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

Button.defaultProps = {
  label: 'Click me'
};

medium

A. defaultProps is not supported on functional components

B. defaultProps should be set inside the function parameters

C. The component should use destructuring for props

D. There is no error; this is correct

Solution

1. Step 1: Check if defaultProps works on functional components

   React Native supports defaultProps on functional components, so this is valid.

2. Step 2: Verify syntax correctness

   The syntax used is correct and will provide default label if none passed.

3. Final Answer:

   There is no error; this is correct -> Option D

4. Quick Check:

   defaultProps on function = valid [OK]

Hint: defaultProps works on functions too [OK]

Common Mistakes:

• Assuming defaultProps only works on classes
• Thinking destructuring is mandatory
• Confusing defaultProps with state

5. You want a component to show a default color 'blue' but only if the passed color prop is a non-empty string. Which is the best way to set this default in a React Native functional component?

hard

A. function Box({ color }) { color = color ? color : 'blue'; ... }

B. function Box({ color = 'blue' }) { ... }

C. function Box({ color }) { color &&= 'blue'; ... }

D. function Box({ color = '' }) { if (color) color = 'blue'; ... }

Solution

1. Step 1: Understand default parameter limits

   Default parameters only apply if the prop is undefined, not empty string.

2. Step 2: Choose a method that checks for non-empty string

   Using a conditional (color ? color : 'blue') ensures empty strings get replaced by 'blue'.

3. Step 3: Compare options

   A fails if color is empty string (uses empty). C's color &&= 'blue' sets 'blue' only if color is truthy (opposite). D's if (color) sets 'blue' only if truthy (wrong).

4. Final Answer:

   function Box({ color }) { color = color ? color : 'blue'; ... } -> Option A

5. Quick Check:

   Conditional check handles empty string default [OK]

Hint: Use conditional to handle empty strings as default [OK]

Common Mistakes:

• Relying only on default parameters for empty strings
• Using &&= which sets value when truthy
• Using if (color) which triggers on truthy