Default props in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component render?

Consider this React functional component using default props. What will be the output when rendered without any props?

React

import React from 'react';

function Greeting({ name = 'Guest' }) {
  return <p>Hello, {name}!</p>;
}

export default function App() {
  return <Greeting />;
}

A <p>Hello, !</p>

B <p>Hello, undefined!</p>

C <p>Hello, Guest!</p>

D Component throws an error

💡 Hint

Look at the default value assigned in the function parameter.

The component Greeting uses a default value 'Guest' for the prop 'name'. When no prop is passed, it uses 'Guest' and renders 'Hello, Guest!'.

📝 Syntax

intermediate

Which option correctly sets default props for a functional component?

You want to set default props for a React functional component named Button. Which code snippet correctly sets the default prop 'color' to 'blue'?

React

function Button({ color }) {
  return <button style={{ color }}>{color}</button>;
}

A Button.defaultProps = { color: 'blue' };

B Button.defaultProps.color = 'blue';

C Button.defaultProps = () => ({ color: 'blue' });

D Button.defaultProps = { color };

💡 Hint

Remember how to assign an object to defaultProps.

The correct way to set default props on a functional component is to assign an object to the static property defaultProps.

❓ state_output

advanced

What is the rendered output of this component?

Given the component below, what will be the text content rendered when is used without props?

React

import React, { useState } from 'react';

function Counter({ start = 5 }) {
  const [count, setCount] = useState(start);
  return <p>Count: {count}</p>;
}

export default function App() {
  return <Counter />;
}

A Component throws an error

B Count: 0

C Count: undefined

D Count: 5

💡 Hint

Check the default value used in useState initialization.

The default prop 'start' is 5, so useState initializes count to 5, rendering 'Count: 5'.

🔧 Debug

advanced

Why does this component render 'Hello, undefined!'?

Examine the code below. Why does the component render 'Hello, undefined!' instead of using the default prop?

React

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

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

export default function App() {
  return <Welcome name={undefined} />;
}

A The defaultProps object is missing a key, so it fails silently.

B Passing name={undefined} overrides defaultProps, so name is undefined.

C defaultProps only works for class components, not functional ones.

D React does not support defaultProps on any component.

💡 Hint

Think about how React treats explicit undefined props.

When a prop is explicitly passed as undefined, React uses that value instead of defaultProps. So name is undefined and renders as such.

🧠 Conceptual

expert

Which statement about default props in React functional components is true?

Select the correct statement about how default props work in React functional components.

A Default props can be set by assigning an object to the component's defaultProps property, but default parameter values in the function signature are preferred in modern React.

B Default props only work if you use class components; functional components ignore defaultProps.

C You must always use the useDefaultProps hook to set default props in functional components.

D Default props are automatically inferred from prop types and do not require explicit setting.

💡 Hint

Consider modern React best practices for default values.

While defaultProps still works on functional components, using default parameter values in the function signature is the modern and preferred approach.