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.