Default props in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default value for the name prop in a React functional component.

React

function Greeting({ name = [1] }) {
  return <h1>Hello, {name}!</h1>;
}

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

A"Guest"

Bnull

Cundefined

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as default will show nothing.

Forgetting to use quotes around string default values.

Setting name = "Guest" in the function parameter provides a default value if no name prop is passed.

2fill in blank

medium

Complete the code to assign a default prop value using the defaultProps property.

React

function Button(props) {
  return <button>{props.label}</button>;
}

Button.[1] = {
  label: "Click me"
};

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

Adefaults

BdefaultProps

CpropsDefaults

DdefaultValues

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'defaults' or 'defaultValues'.

Trying to set defaults inside the function body instead of outside.

React components can have a defaultProps property to set default values for props.

3fill in blank

hard

Fix the error in this React component by completing the default prop assignment correctly.

React

const Welcome = ({ greeting }) => <h2>{greeting}</h2>;

Welcome.[1] = {
  greeting: "Hello!"
};

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

AdefaultProps

Bdefaults

CpropDefaults

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'default' or 'defaults' instead of 'defaultProps'.

Trying to assign default props inside the component function.

The correct property to assign default props is defaultProps. Others cause errors.

4fill in blank

hard

Fill both blanks to set default props and use them in a functional component.

React

function Card({ title = [1] }) {
  return <div><h3>{title}</h3></div>;
}

Card.[2] = {
  title: "Default Title"
};

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

A"Default Title"

BdefaultProps

Cdefaults

D"Card Title"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names like 'defaults'.

Not using quotes for string default values.

The default value in the parameter can be set to a string, and defaultProps sets defaults outside the function.

5fill in blank

hard

Fill all three blanks to create a component with default props and use them inside.

React

const Label = ({ text = [1], color = [2] }) => {
  return <span style={{ color: [3] }}>{text}</span>;
};

Label.defaultProps = {
  text: "Name",
  color: "blue"
};

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

A"Name"

B"blue"

Ccolor

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string 'color' in style instead of the variable.

Not matching default values with defaultProps.

Default values in parameters match the defaultProps. The style color uses the color prop.

Practice

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

easy

A. To enforce type checking on props

B. To optimize component rendering speed

C. To make the component stateful

D. To provide fallback values for props that are not passed

Solution

1. Step 1: Understand what props are

   Props are inputs to React components that can be passed from parent components.

2. Step 2: Identify the role of default props

   Default props provide fallback values when no value is passed for a prop, preventing undefined values.

3. Final Answer:

   To provide fallback values for props that are not passed -> Option D

4. Quick Check:

   Default props = fallback values [OK]

Hint: Default props fill in missing props automatically [OK]

Common Mistakes:

• Confusing default props with state
• Thinking default props enforce types
• Assuming default props improve performance

2. Which of the following is the correct way to set default props in a React functional component using ES6 syntax?

easy

A. function MyComponent(props = { name: 'Guest' }) { return {props.name}; }

B. function MyComponent({ name = 'Guest' }) { return {name}; }

C. MyComponent.defaultProps = { name: 'Guest' }; function MyComponent(props) { return {props.name}; }

D. function MyComponent(props) { props.name = props.name || 'Guest'; return {props.name}; }

Solution

1. Step 1: Review ES6 default parameter syntax

   Default values can be set directly in the function parameter list using destructuring with defaults.

2. Step 2: Check each option

   function MyComponent({ name = 'Guest' }) { return <div>{name}</div>; } correctly uses destructuring with a default value: { name = 'Guest' }.

3. Final Answer:

   function MyComponent({ name = 'Guest' }) { return <div>{name}</div>; } -> Option B

4. Quick Check:

   Default props in parameters = function MyComponent({ name = 'Guest' }) { return <div>{name}</div>; } [OK]

Hint: Use destructuring with default values in parameters [OK]

Common Mistakes:

• Trying to set default props inside the function body
• Using defaultProps with functional components incorrectly
• Assigning default props to the whole props object

3. What will be rendered by this component?

function Greeting({ name = 'Friend' }) {
  return <h1>Hello, {name}!

medium

A. <h1>Hello, Friend!</h1>

B. <h1>Hello, undefined!</h1>

C. Error: Missing required prop 'name'

D. <h1>Hello, !</h1>

Solution

1. Step 1: Check the default prop value

   The component uses destructuring with a default value: name = 'Friend'.

2. Step 2: Analyze the usage without passing name

   No prop is passed, so the default 'Friend' is used.

3. Final Answer:

   <h1>Hello, Friend!</h1> -> Option A

4. Quick Check:

   Default prop used = 'Friend' [OK]

Hint: No prop passed? Default value is used [OK]

Common Mistakes:

• Assuming missing props cause errors
• Expecting undefined instead of default
• Confusing default props with required props

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

function Button(props) {
  const { label } = props;
  return <button>{label}</button>;
}

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

// Usage:
<Button />

medium

A. defaultProps is not supported on functional components

B. The component should use destructuring with default values instead

C. No error; this code works correctly

D. The defaultProps assignment should be inside the function

Solution

1. Step 1: Understand defaultProps on functional components

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

2. Step 2: Check usage and output

   Since no label prop is passed, defaultProps provides 'Click me', so the button shows that text.

3. Final Answer:

   No error; this code works correctly -> Option C

4. Quick Check:

   defaultProps works on functions = No error; this code works correctly [OK]

Hint: defaultProps still works on functions but prefer defaults in parameters [OK]

Common Mistakes:

• Thinking defaultProps is deprecated for functional components
• Placing defaultProps inside the function body
• Confusing defaultProps with state initialization

5. You want a component to have a default prop that is an object with nested values. Which approach correctly sets default props to avoid errors if the prop is missing?

function Profile({ user = { name: 'Guest', age: 0 } }) {
  return <div>Name: {user.name}, Age: {user.age}</div>;
}

hard

A. Use destructuring with a default object in the parameter as shown

B. Set defaultProps = { user: { name: 'Guest', age: 0 } } after the function

C. Initialize user inside the function body with if (!user) user = {...}

D. Pass user as a required prop and do not set defaults

Solution

1. Step 1: Understand default props for nested objects

   Setting default nested objects in parameters prevents errors when accessing properties.

2. Step 2: Compare approaches

   Use destructuring with a default object in the parameter as shown uses destructuring with a default object, which safely provides nested defaults.

3. Final Answer:

   Use destructuring with a default object in the parameter as shown -> Option A

4. Quick Check:

   Default nested object in parameters = Use destructuring with a default object in the parameter as shown [OK]

Hint: Set nested defaults in parameter destructuring to avoid undefined errors [OK]

Common Mistakes:

• Setting defaultProps with nested objects can cause shallow merge issues
• Initializing defaults inside function body can be verbose and error-prone
• Not providing defaults leads to runtime errors accessing nested props