Props destructuring in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component?

Consider this React component using props destructuring. What will it render?

React

function Greeting({ name, age }) {
  return <p>Hello, {name}! You are {age} years old.</p>;
}

// Usage: <Greeting name="Alice" age={30} />

A <p>Hello, Alice! You are 30 years old.</p>

B <p>Hello, Alice! You are {age} years old.</p>

C <p>Hello, {name}! You are {age} years old.</p>

D <p>Hello, ! You are 30 years old.</p>

💡 Hint

Look at how props are unpacked directly in the function parameters.

The component uses destructuring to get 'name' and 'age' from props. So it replaces {name} with 'Alice' and {age} with 30.

📝 Syntax

intermediate

Which option correctly destructures props in a functional component?

You want to extract 'title' and 'content' from props in a React functional component. Which code is correct?

A

function Post(props) {
  return <article><h1>{props.title}</h1><p>{props.content}</p></article>;
}

B

function Post({ title, content }) {
  return <article><h1>{title}</h1><p>{content}</p></article>;
}

C

function Post(title, content) {
  return <article><h1>{title}</h1><p>{content}</p></article>;
}

D

function Post(props) {
  const { title, content } = props;
  return <article><h1>{title}</h1><p>{content}</p></article>;
}

💡 Hint

Destructuring can happen directly in the function parameters.

Option B shows destructuring directly in the parameter list, which is a common and concise pattern.

🔧 Debug

advanced

Why does this component throw an error?

This React component tries to destructure props but causes an error. Why?

React

function UserProfile({ user }) {
  const { name, age } = user;
  return <p>{name} is {age} years old.</p>;
}

// Usage: <UserProfile />

A Because 'name' and 'age' are not valid prop names.

B Because destructuring must happen in the function parameters, not inside the function body.

C Because 'user' is undefined when no prop is passed, destructuring 'name' and 'age' fails.

D Because React components cannot destructure nested objects.

💡 Hint

Think about what happens if 'user' prop is missing.

If 'user' prop is missing, it is undefined. Trying to destructure properties from undefined causes an error.

❓ state_output

advanced

What is the output after clicking the button?

This React component uses props destructuring and state. What will it display after clicking the button once?

React

import { useState } from 'react';

function Counter({ initial }) {
  const [count, setCount] = useState(initial);
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

// Usage: <Counter initial={5} />

A Count: 6

B Count: 5

C Count: undefined

D Count: NaN

💡 Hint

The initial state is set from the 'initial' prop, then incremented by 1 on click.

The state starts at 5 from the prop. Clicking the button adds 1, so count becomes 6.

🧠 Conceptual

expert

Why prefer props destructuring in React components?

Which is the best reason to use props destructuring in React functional components?

A It allows React to memoize components without extra code.

B It improves the performance of React components by reducing rendering time.

C It automatically validates prop types and prevents runtime errors.

D It makes the code cleaner and variables are easier to use without repeating 'props.' each time.

💡 Hint

Think about how destructuring affects code readability.

Destructuring props helps write cleaner code by extracting needed values directly, avoiding repeated 'props.' prefixes.

Practice

1. What does props destructuring in a React functional component do?

easy

A. It creates a new component with different props.

B. It extracts specific properties from the props object directly in the function parameters.

C. It changes the state of the component automatically.

D. It prevents the component from receiving props.

Solution

1. Step 1: Understand props in React

   Props are passed as an object to components, containing all passed data.

2. Step 2: What destructuring does

   Destructuring extracts specific keys from the props object directly in the function parameters for easier access.

3. Final Answer:

   It extracts specific properties from the props object directly in the function parameters. -> Option B

4. Quick Check:

   Props destructuring = extracting keys [OK]

Hint: Destructuring picks props by name inside function parentheses [OK]

Common Mistakes:

• Thinking destructuring changes state
• Confusing destructuring with creating new components
• Believing destructuring blocks props

2. Which of the following is the correct syntax to destructure props name and age in a React functional component?

easy

A. function User({name, age}) { return {name} is {age}; }

B. function User(props) { const name = props.name; const age = props.age; return {name} is {age}; }

C. function User(name, age) { return {name} is {age}; }

D. function User(props) { return {props.name, props.age}; }

Solution

1. Step 1: Identify destructuring in parameters

   Destructuring happens inside the function parentheses by listing keys in curly braces.

2. Step 2: Check each option

   function User({name, age}) { return <p>{name} is {age}</p>; } correctly destructures name and age directly in the parameters.

3. Final Answer:

   function User({name, age}) { return <p>{name} is {age}</p>; } -> Option A

4. Quick Check:

   Destructuring in parameters = function User({name, age}) { return

   {name} is {age}

   ; } [OK]

Hint: Destructure props inside parentheses with curly braces [OK]

Common Mistakes:

• Passing props as separate parameters instead of one object
• Manually extracting individual props instead of destructuring
• Using commas inside JSX expressions incorrectly

3. What will be the rendered output of this component?

function Greeting({ name, city }) {
  return <p>Hello {name} from {city}!</p>;
}

// Usage: <Greeting name="Anna" city="Paris" />

medium

A. Hello Anna from Paris!

B. Hello {name} from {city}!

C. Hello Anna from Paris!

D. Error: props not defined

Solution

1. Step 1: Understand destructuring in parameters

   The component extracts name and city from props directly.

2. Step 2: Render output with given props

   Using name="Anna" and city="Paris", the JSX renders as <p>Hello Anna from Paris!</p>.

3. Final Answer:

   <p>Hello Anna from Paris!</p> -> Option A

4. Quick Check:

   Destructured props render correct text [OK]

Hint: Destructured props show passed values in JSX [OK]

Common Mistakes:

• Expecting literal {name} text instead of value
• Forgetting to pass props when using component
• Confusing JSX tags with plain text

4. Identify the error in this React component using props destructuring:

function Info({ title, description }) {
  return <div>
    <h1>{title}</h1>
    <p>{props.description}</p>
  </div>
}

medium

A. Missing return statement in the function.

B. Destructuring syntax is incorrect in the function parameters.

C. Using props.description inside the component causes an error.

D. JSX tags are not properly closed.

Solution

1. Step 1: Check destructuring usage

   The function destructures title and description from props, so props is not defined inside.

2. Step 2: Identify incorrect usage

   Using props.description causes an error because props is not declared; should use description directly.

3. Final Answer:

   Using props.description inside the component causes an error. -> Option C

4. Quick Check:

   Destructuring means no props object inside function [OK]

Hint: Use destructured names directly, not props.name [OK]

Common Mistakes:

• Using props.property after destructuring
• Thinking destructuring creates a new props object
• Ignoring error messages about undefined variables

5. You want to create a React component that shows a user's firstName, lastName, and age. You receive props as a single object. Which is the best way to use props destructuring to make your code clean and readable?

hard

A. function User(props) { const { firstName, lastName, age } = props; return {firstName} {lastName} is {age} years old.; }

B. function User(firstName, lastName, age) { return {firstName} {lastName} is {age} years old.; }

C. function User() { return {props.firstName} {props.lastName} is {props.age} years old.; }

D. function User({ firstName, lastName, age }) { return {firstName} {lastName} is {age} years old.; }

Solution

1. Step 1: Compare destructuring styles

   function User(props) { const { firstName, lastName, age } = props; return <p>{firstName} {lastName} is {age} years old.</p>; } destructures inside the function body, which works but is less concise.

2. Step 2: Identify best practice

   function User({ firstName, lastName, age }) { return <p>{firstName} {lastName} is {age} years old.</p>; } destructures props directly in the function parameters, making code cleaner and easier to read.

3. Step 3: Check incorrect options

   function User() { return <p>{props.firstName} {props.lastName} is {props.age} years old.</p>; } uses props without declaring it, causing error. function User(firstName, lastName, age) { return <p>{firstName} {lastName} is {age} years old.</p>; } treats props as separate parameters, which is invalid.

4. Final Answer:

   function User({ firstName, lastName, age }) { return <p>{firstName} {lastName} is {age} years old.</p>; } -> Option D

5. Quick Check:

   Destructure props in parameters for clean code [OK]

Hint: Destructure all needed props inside function parentheses [OK]

Common Mistakes:

• Destructuring inside function body instead of parameters
• Using props without declaring it
• Passing props as separate parameters instead of one object