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'.