Default props in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are default props in React Native?

Default props are values given to a component's props that are used if no value is provided by the parent component. They ensure the component works with sensible defaults.

beginner

How do you define default props in a functional React Native component?

You can define default props by assigning a default value in the function parameter or by setting the component's defaultProps property.

beginner

Why are default props useful in mobile app components?

They prevent errors by providing fallback values, making components more robust and easier to reuse without always specifying every prop.

beginner

Example: What will be the output if a component has a default prop color='blue' but is used without specifying color?

The component will use the default color 'blue' and render accordingly, even if the parent does not provide a color prop.

beginner

Can default props be overridden? How?

Yes, default props are overridden by passing a prop with the same name from the parent component. The passed value takes priority.

What happens if a React Native component is rendered without a prop that has a default value?

A The component ignores the missing prop.

B The component crashes.

C The prop value is undefined.

D The component uses the default prop value.

If a prop is missing, React Native uses the default prop value to keep the component working smoothly.

How can you set default props for a functional component in React Native?

A By assigning default values in the function parameters or using <code>Component.defaultProps</code>.

B By using <code>this.setDefaultProps()</code>.

C By wrapping the component in a <code>DefaultProps</code> tag.

D By importing default props from a library.

Default props can be set by default parameters or by assigning to Component.defaultProps.

If a parent component passes a prop value, what happens to the default prop?

A An error occurs.

B The passed prop value overrides the default prop.

C Both values are merged.

D The default prop overrides the passed value.

Passed props always override default props to allow customization.

Why should you use default props in your components?

A To provide fallback values and avoid errors when props are missing.

B To make components slower.

C To force users to always pass props.

D To disable props.

Default props help components work safely even if some props are not provided.

Which of these is a correct way to define default props for a React Native functional component named Button?

A Button.setDefaultProps({ color: 'red' });

B defaultProps(Button) = { color: 'red' };

C Button.defaultProps = { color: 'red' };

D Button.props.default = { color: 'red' };

The correct syntax is to assign an object to Button.defaultProps.

Explain what default props are and why they are helpful in React Native components.

Think about what happens if a prop is missing when a component is used.

Describe two ways to set default props in a React Native functional component.

One way is inside the function signature, the other is a static property on the component.

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