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.