Passing props to components in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component that receives props and renders a greeting message. What will be displayed on the screen?

React

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

// Usage
<Greeting name="Alice" />

A Error: name is not defined

B Hello, name!

C Hello, !

D Hello, Alice!

💡 Hint

Look at how the prop 'name' is used inside the component.

The component receives a prop called name and uses it inside the JSX to display the greeting. Since name is passed as "Alice", the output is "Hello, Alice!".

❓ state_output

intermediate

What is the value of the prop inside the child component?

Given the parent component passing a prop to a child, what will the child component receive as the value of the prop count?

React

function Parent() {
  const count = 5;
  return <Child count={count} />;
}

function Child({ count }) {
  return <p>{count}</p>;
}

A 5

B undefined

C 0

D null

💡 Hint

Check what value is passed from Parent to Child.

The Parent component passes the number 5 as the count prop to Child. So Child receives count = 5.

📝 Syntax

advanced

Which option correctly passes multiple props to a component?

You want to pass two props, title and subtitle, to a component. Which option is syntactically correct in React?

A <Header title="Welcome" subtitle="Home" />

B <Header title="Welcome", subtitle="Home" />

C <Header title="Welcome"; subtitle="Home" />

D <Header title="Welcome" subtitle="Home"></Header>

💡 Hint

Props are passed like HTML attributes separated by spaces, not commas or semicolons.

In JSX, props are passed as attributes separated by spaces without commas or semicolons. Option A and D look similar, but D is also valid JSX. Both A and D are valid syntax for passing multiple props.

🔧 Debug

advanced

Why does this component fail to receive the prop?

Look at this code. Why does the Child component not display the passed prop message?

React

function Parent() {
  const message = "Hi!";
  return <Child msg={message} />;
}

function Child({ message }) {
  return <p>{message}</p>;
}

A The prop name in Parent and Child do not match (msg vs message).

B The Child component is missing a return statement.

C The Parent component does not pass any props.

D The message variable is not defined in Parent.

💡 Hint

Check the prop names used in Parent and Child components.

The Parent passes a prop named msg, but Child expects a prop named message. Because the names differ, message is undefined in Child.

🧠 Conceptual

expert

What happens if a required prop is not passed to a component?

Consider a React component that expects a prop but the parent does not pass it. What is the typical behavior?

React

function Display({ text }) {
  return <p>{text}</p>;
}

// Usage
<Display />

A The component renders nothing and no error occurs.

B React throws a runtime error and crashes the app.

C The component renders <p>undefined</p> because the prop is missing.

D React automatically assigns an empty string to missing props.

💡 Hint

Think about what happens when you use a variable that is undefined inside JSX.

If a prop is missing, its value is undefined. Rendering {undefined} in JSX results in no visible text, but the element still exists. So the paragraph renders but appears empty or shows "undefined" if coerced to string.

Practice

1. What is the main purpose of props in React components?

easy

A. To handle user events like clicks

B. To store local state inside a component

C. To pass data from a parent component to a child component

D. To style components with CSS

Solution

1. Step 1: Understand the role of props

   Props are used to send data from one component to another, specifically from parent to child.

2. Step 2: Differentiate props from other React features

   State stores local data, events handle interactions, and CSS styles components, but props specifically pass data down.

3. Final Answer:

   To pass data from a parent component to a child component -> Option C

4. Quick Check:

   Props = data passing [OK]

Hint: Props always send data down from parent to child [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle events
• Believing props style components

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a component Header?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed like HTML attributes: name="value" or name={expression}.

2. Step 2: Check each option

   uses correct string syntax.

   misses quotes around string.

   uses invalid quotes.

   uses colon which is invalid in JSX.

3. Final Answer:

   <Header title="Hello" /> -> Option B

4. Quick Check:

   Props look like HTML attributes [OK]

Hint: Use quotes for string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string values
• Using colons instead of equals
• Adding extra quotes around prop names

3. What will be rendered by this React component?

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage:
<Greeting name="Alice" />

medium

A. Hello, Alice!

B. Hello, {props.name}!

C. Hello, name!

D. Error: props is undefined

Solution

1. Step 1: Understand how props are used inside the component

   The component receives props and accesses props.name to display the name.

2. Step 2: Check the usage of the component

   The component is called with name="Alice", so props.name is "Alice".

3. Final Answer:

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

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values replace placeholders inside JSX [OK]

Common Mistakes:

• Printing literal {props.name} instead of value
• Forgetting to pass the prop
• Assuming props is undefined

4. Identify the error in this code snippet:

function Welcome(props) {
  return <h2>Welcome, {props.user}!</h2>;
}

// Usage:
<Welcome user=John />

medium

A. Missing quotes around string prop value 'John'

B. Props object is not passed correctly

C. Component name should be lowercase

D. JSX tags are not closed properly

Solution

1. Step 1: Check the prop usage in JSX

   In JSX, string prop values must be quoted, e.g., user="John".

2. Step 2: Identify the error in usage

   The code uses user=John without quotes, causing a syntax error.

3. Final Answer:

   Missing quotes around string prop value 'John' -> Option A

4. Quick Check:

   String props need quotes [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string props
• Using lowercase component names
• Leaving JSX tags unclosed

5. Given this parent and child component code, what will be the output?

function Child({ message }) {
  return <p>Message: {message || 'No message'}</p>;
}

function Parent() {
  const msg = '';
  return <Child message={msg} />;
}

hard

A. Message:

B. Error: message prop missing

C. Message: undefined

D. Message: No message

Solution

1. Step 1: Analyze the prop value passed

   The parent passes msg which is an empty string '' as the message prop.

2. Step 2: Understand the child component's rendering logic

   The child uses {message || 'No message'}. Since empty string is falsy, it falls back to 'No message'.

3. Final Answer:

   <p>Message: No message</p> -> Option D

4. Quick Check:

   Falsy empty string triggers fallback [OK]

Hint: Falsy props like '' use fallback values in JSX [OK]

Common Mistakes:

• Assuming empty string is truthy
• Expecting empty string to display as is
• Thinking missing prop causes error here